feat:Added piechart in Dashboard
This commit is contained in:
+241
@@ -0,0 +1,241 @@
|
||||
import Utils from '../utils/Utils'
|
||||
|
||||
/**
|
||||
* ApexCharts Theme Class for setting the colors and palettes.
|
||||
*
|
||||
* @module Theme
|
||||
**/
|
||||
|
||||
export default class Theme {
|
||||
constructor(ctx) {
|
||||
this.ctx = ctx
|
||||
this.colors = []
|
||||
this.w = ctx.w
|
||||
const w = this.w
|
||||
|
||||
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')
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setDefaultColors()
|
||||
}
|
||||
|
||||
setDefaultColors() {
|
||||
let w = this.w
|
||||
let 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({
|
||||
value: w.globals.axisCharts
|
||||
? w.globals.series[i][0]
|
||||
? w.globals.series[i][0]
|
||||
: 0
|
||||
: w.globals.series[i],
|
||||
seriesIndex: i,
|
||||
dataPointIndex: i,
|
||||
w,
|
||||
})
|
||||
}
|
||||
return c
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// user defined colors in series array
|
||||
w.globals.seriesColors.map((c, i) => {
|
||||
if (c) {
|
||||
w.globals.colors[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)
|
||||
|
||||
const colorTypes = ['fill', 'stroke']
|
||||
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()
|
||||
}
|
||||
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()
|
||||
}
|
||||
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()
|
||||
}
|
||||
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()
|
||||
}
|
||||
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
|
||||
|
||||
let len = length || w.globals.series.length
|
||||
|
||||
if (distributed === null) {
|
||||
distributed =
|
||||
this.isBarDistributed ||
|
||||
this.isHeatmapDistributed ||
|
||||
(w.config.chart.type === 'heatmap' &&
|
||||
w.config.plotOptions.heatmap.colorScale.inverse)
|
||||
}
|
||||
|
||||
if (distributed && w.globals.series.length) {
|
||||
len =
|
||||
w.globals.series[w.globals.maxValsInArrayIndex].length *
|
||||
w.globals.series.length
|
||||
}
|
||||
|
||||
if (colorSeries.length < len) {
|
||||
let diff = len - colorSeries.length
|
||||
for (let i = 0; i < diff; i++) {
|
||||
colorSeries.push(colorSeries[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateThemeOptions(options) {
|
||||
options.chart = options.chart || {}
|
||||
options.tooltip = options.tooltip || {}
|
||||
const mode = options.theme.mode || 'light'
|
||||
const palette = options.theme.palette
|
||||
? options.theme.palette
|
||||
: mode === 'dark'
|
||||
? 'palette4'
|
||||
: 'palette1'
|
||||
const foreColor = options.chart.foreColor
|
||||
? options.chart.foreColor
|
||||
: mode === 'dark'
|
||||
? '#f6f7f8'
|
||||
: '#373d3f'
|
||||
|
||||
options.tooltip.theme = mode
|
||||
options.chart.foreColor = foreColor
|
||||
options.theme.palette = palette
|
||||
|
||||
return options
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
return this.colors
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user