Skip to content

Commit

Permalink
refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@junedchhipa
junedchhipa committed Sep 21, 2024
1 parent b3897ef commit 1430186
Show file tree
Hide file tree
Showing 8 changed files with 761 additions and 1,106 deletions.
463 changes: 177 additions & 286 deletions src/modules/Core.js
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion src/modules/Fill.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,6 @@ class Fill {
}${patternID}`

if (this.patternIDs.indexOf(patternKey) === -1) {
console.log('patternKey', patternKey)
this.clippedImgArea({
opacity: fillOpacity,
image: Array.isArray(imgSrc)
Expand Down
293 changes: 145 additions & 148 deletions src/modules/Theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,155 +9,174 @@ import Utils from '../utils/Utils'
export default class Theme {
constructor(ctx) {
this.ctx = ctx
this.colors = []
this.w = ctx.w
const w = this.w

this.colors = []
this.isColorFn = false
this.isHeatmapDistributed =
(w.config.chart.type === 'treemap' &&
w.config.plotOptions.treemap.distributed) ||
(w.config.chart.type === 'heatmap' &&
w.config.plotOptions.heatmap.distributed)
this.isBarDistributed =
w.config.plotOptions.bar.distributed &&
(w.config.chart.type === 'bar' || w.config.chart.type === 'rangeBar')
this.isHeatmapDistributed = this.checkHeatmapDistributed()
this.isBarDistributed = this.checkBarDistributed()
}

checkHeatmapDistributed() {
const { chart, plotOptions } = this.w.config
return (
(chart.type === 'treemap' &&
plotOptions.treemap &&
plotOptions.treemap.distributed) ||
(chart.type === 'heatmap' &&
plotOptions.heatmap &&
plotOptions.heatmap.distributed)
)
}

checkBarDistributed() {
const { chart, plotOptions } = this.w.config
return (
plotOptions.bar &&
plotOptions.bar.distributed &&
(chart.type === 'bar' || chart.type === 'rangeBar')
)
}

init() {
this.setDefaultColors()
}

setDefaultColors() {
let w = this.w
let utils = new Utils()
const w = this.w
const utils = new Utils()

w.globals.dom.elWrap.classList.add(
`apexcharts-theme-${w.config.theme.mode}`
)

if (w.config.colors === undefined || w.config.colors?.length === 0) {
w.globals.colors = this.predefined()
} else {
w.globals.colors = w.config.colors

// if user provided a function in colors, we need to eval here
if (
Array.isArray(w.config.colors) &&
w.config.colors.length > 0 &&
typeof w.config.colors[0] === 'function'
) {
w.globals.colors = w.config.series.map((s, i) => {
let c = w.config.colors[i]
if (!c) c = w.config.colors[0]
if (typeof c === 'function') {
this.isColorFn = true
return c({
w.globals.colors = this.getColors(w.config.colors)

this.applySeriesColors(w.globals.seriesColors, w.globals.colors)

if (w.config.theme.monochrome.enabled) {
w.globals.colors = this.getMonochromeColors(
w.config.theme.monochrome,
w.globals.series,
utils
)
}

const defaultColors = w.globals.colors.slice()
this.pushExtraColors(w.globals.colors)

this.applyColorTypes(['fill', 'stroke'], defaultColors)
this.applyDataLabelsColors(defaultColors)
this.applyRadarPolygonsColors()
this.applyMarkersColors(defaultColors)
}

getColors(configColors) {
const w = this.w
if (!configColors || configColors.length === 0) {
return this.predefined()
}

if (
Array.isArray(configColors) &&
configColors.length > 0 &&
typeof configColors[0] === 'function'
) {
this.isColorFn = true
return w.config.series.map((s, i) => {
let c = configColors[i] || configColors[0]
return typeof c === 'function'
? c({
value: w.globals.axisCharts
? w.globals.series[i][0]
? w.globals.series[i][0]
: 0
? w.globals.series[i][0] || 0
: w.globals.series[i],
seriesIndex: i,
dataPointIndex: i,
w,
w: this.w,
})
}
return c
})
}
: c
})
}

// user defined colors in series array
w.globals.seriesColors.map((c, i) => {
return configColors
}

applySeriesColors(seriesColors, globalsColors) {
seriesColors.forEach((c, i) => {
if (c) {
w.globals.colors[i] = c
globalsColors[i] = c
}
})
}

if (w.config.theme.monochrome.enabled) {
let monoArr = []
let glsCnt = w.globals.series.length
if (this.isBarDistributed || this.isHeatmapDistributed) {
glsCnt = w.globals.series[0].length * w.globals.series.length
}

let mainColor = w.config.theme.monochrome.color
let part = 1 / (glsCnt / w.config.theme.monochrome.shadeIntensity)
let shade = w.config.theme.monochrome.shadeTo
let percent = 0

for (let gsl = 0; gsl < glsCnt; gsl++) {
let newColor

if (shade === 'dark') {
newColor = utils.shadeColor(percent * -1, mainColor)
percent = percent + part
} else {
newColor = utils.shadeColor(percent, mainColor)
percent = percent + part
}

monoArr.push(newColor)
}
w.globals.colors = monoArr.slice()
}
const defaultColors = w.globals.colors.slice()

// if user specified fewer colors than no. of series, push the same colors again
this.pushExtraColors(w.globals.colors)
getMonochromeColors(monochrome, series, utils) {
const { color, shadeIntensity, shadeTo } = monochrome
const glsCnt =
this.isBarDistributed || this.isHeatmapDistributed
? series[0].length * series.length
: series.length
const part = 1 / (glsCnt / shadeIntensity)
let percent = 0

return Array.from({ length: glsCnt }, () => {
const newColor =
shadeTo === 'dark'
? utils.shadeColor(percent * -1, color)
: utils.shadeColor(percent, color)
percent += part
return newColor
})
}

const colorTypes = ['fill', 'stroke']
applyColorTypes(colorTypes, defaultColors) {
const w = this.w
colorTypes.forEach((c) => {
if (w.config[c].colors === undefined) {
w.globals[c].colors = this.isColorFn ? w.config.colors : defaultColors
} else {
w.globals[c].colors = w.config[c].colors.slice()
}
w.globals[c].colors =
w.config[c].colors === undefined
? this.isColorFn
? w.config.colors
: defaultColors
: w.config[c].colors.slice()
this.pushExtraColors(w.globals[c].colors)
})
}

if (w.config.dataLabels.style.colors === undefined) {
w.globals.dataLabels.style.colors = defaultColors
} else {
w.globals.dataLabels.style.colors =
w.config.dataLabels.style.colors.slice()
}
applyDataLabelsColors(defaultColors) {
const w = this.w
w.globals.dataLabels.style.colors =
w.config.dataLabels.style.colors === undefined
? defaultColors
: w.config.dataLabels.style.colors.slice()
this.pushExtraColors(w.globals.dataLabels.style.colors, 50)
}

if (w.config.plotOptions.radar.polygons.fill.colors === undefined) {
w.globals.radarPolygons.fill.colors = [
w.config.theme.mode === 'dark' ? '#424242' : 'none',
]
} else {
w.globals.radarPolygons.fill.colors =
w.config.plotOptions.radar.polygons.fill.colors.slice()
}
applyRadarPolygonsColors() {
const w = this.w
w.globals.radarPolygons.fill.colors =
w.config.plotOptions.radar.polygons.fill.colors === undefined
? [w.config.theme.mode === 'dark' ? '#424242' : 'none']
: w.config.plotOptions.radar.polygons.fill.colors.slice()
this.pushExtraColors(w.globals.radarPolygons.fill.colors, 20)
}

// The point colors
if (w.config.markers.colors === undefined) {
w.globals.markers.colors = defaultColors
} else {
w.globals.markers.colors = w.config.markers.colors.slice()
}
applyMarkersColors(defaultColors) {
const w = this.w
w.globals.markers.colors =
w.config.markers.colors === undefined
? defaultColors
: w.config.markers.colors.slice()
this.pushExtraColors(w.globals.markers.colors)
}

// When the number of colors provided is less than the number of series, this method
// will push same colors to the list
// params:
// distributed is only valid for distributed column/bar charts
pushExtraColors(colorSeries, length, distributed = null) {
let w = this.w

const w = this.w
let len = length || w.globals.series.length

if (distributed === null) {
distributed =
this.isBarDistributed ||
this.isHeatmapDistributed ||
(w.config.chart.type === 'heatmap' &&
w.config.plotOptions.heatmap &&
w.config.plotOptions.heatmap.colorScale.inverse)
}

Expand All @@ -179,14 +198,16 @@ export default class Theme {
options.chart = options.chart || {}
options.tooltip = options.tooltip || {}
const mode = options.theme.mode
const palette = mode === 'dark'
? 'palette4'
: mode === 'light'
const palette =
mode === 'dark'
? 'palette4'
: mode === 'light'
? 'palette1'
: options.theme.palette || 'palette1'
const foreColor = mode === 'dark'
? '#f6f7f8'
: mode === 'light'
const foreColor =
mode === 'dark'
? '#f6f7f8'
: mode === 'light'
? '#373d3f'
: options.chart.foreColor || '#373d3f'

Expand All @@ -198,44 +219,20 @@ export default class Theme {
}

predefined() {
let palette = this.w.config.theme.palette

// D6E3F8, FCEFEF, DCE0D9, A5978B, EDDDD4, D6E3F8, FEF5EF
switch (palette) {
case 'palette1':
this.colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']
break
case 'palette2':
this.colors = ['#3f51b5', '#03a9f4', '#4caf50', '#f9ce1d', '#FF9800']
break
case 'palette3':
this.colors = ['#33b2df', '#546E7A', '#d4526e', '#13d8aa', '#A5978B']
break
case 'palette4':
this.colors = ['#4ecdc4', '#c7f464', '#81D4FA', '#fd6a6a', '#546E7A']
break
case 'palette5':
this.colors = ['#2b908f', '#f9a3a4', '#90ee7e', '#fa4443', '#69d2e7']
break
case 'palette6':
this.colors = ['#449DD1', '#F86624', '#EA3546', '#662E9B', '#C5D86D']
break
case 'palette7':
this.colors = ['#D7263D', '#1B998B', '#2E294E', '#F46036', '#E2C044']
break
case 'palette8':
this.colors = ['#662E9B', '#F86624', '#F9C80E', '#EA3546', '#43BCCD']
break
case 'palette9':
this.colors = ['#5C4742', '#A5978B', '#8D5B4C', '#5A2A27', '#C4BBAF']
break
case 'palette10':
this.colors = ['#A300D6', '#7D02EB', '#5653FE', '#2983FF', '#00B1F2']
break
default:
this.colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']
break
const palette = this.w.config.theme.palette
const palettes = {
palette1: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0'],
palette2: ['#3f51b5', '#03a9f4', '#4caf50', '#f9ce1d', '#FF9800'],
palette3: ['#33b2df', '#546E7A', '#d4526e', '#13d8aa', '#A5978B'],
palette4: ['#4ecdc4', '#c7f464', '#81D4FA', '#fd6a6a', '#546E7A'],
palette5: ['#2b908f', '#f9a3a4', '#90ee7e', '#fa4443', '#69d2e7'],
palette6: ['#449DD1', '#F86624', '#EA3546', '#662E9B', '#C5D86D'],
palette7: ['#D7263D', '#1B998B', '#2E294E', '#F46036', '#E2C044'],
palette8: ['#662E9B', '#F86624', '#F9C80E', '#EA3546', '#43BCCD'],
palette9: ['#5C4742', '#A5978B', '#8D5B4C', '#5A2A27', '#C4BBAF'],
palette10: ['#A300D6', '#7D02EB', '#5653FE', '#2983FF', '#00B1F2'],
default: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0'],
}
return this.colors
return palettes[palette] || palettes.default
}
}
Loading

0 comments on commit 1430186

Please sign in to comment.