Added themes config to all the themes
This commit is contained in:
Subhash Halder
parent
b2669aaca9
commit
7bdf4c3dbb
|
|
@ -5,6 +5,7 @@ export interface XYChartAxisThemeConfig {
|
|||
}
|
||||
|
||||
export interface XYChartThemeConfig {
|
||||
backgroundColor: string;
|
||||
titleColor: string;
|
||||
axisLineColor: string;
|
||||
xAxisLableColor: string;
|
||||
|
|
@ -13,7 +14,7 @@ export interface XYChartThemeConfig {
|
|||
yAxisLableColor: string;
|
||||
yAxisTitleColor: string;
|
||||
yAxisTickColor: string;
|
||||
plotBaseColor: string;
|
||||
plotColorPalette: string;
|
||||
}
|
||||
|
||||
export interface ChartComponent {
|
||||
|
|
|
|||
|
|
@ -39,9 +39,7 @@ let tmpSVGGElem: SVGGType;
|
|||
let xyChartConfig: XYChartConfig = getChartDefaultConfig();
|
||||
let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig();
|
||||
let xyChartData: XYChartData = getChartDefalutData();
|
||||
let plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor)
|
||||
? xyChartThemeConfig.plotBaseColor
|
||||
: plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor);
|
||||
let plotColorPalette = xyChartThemeConfig.plotColorPalette;
|
||||
let hasSetXAxis = false;
|
||||
let hasSetYAxis = false;
|
||||
|
||||
|
|
@ -50,26 +48,11 @@ interface NormalTextType {
|
|||
text: string;
|
||||
}
|
||||
|
||||
function plotColorPaletteGenerator(baseColor: string, noOfColorNeeded = 15): string[] {
|
||||
const colors = [];
|
||||
const MAX_HUE_VALUE = 360;
|
||||
const baseHue = channel(baseColor, 'h');
|
||||
if (baseHue > MAX_HUE_VALUE / 2) {
|
||||
const decr = Math.floor(baseHue / noOfColorNeeded);
|
||||
for (let i = 0; i <= baseHue; i += decr) {
|
||||
colors.push(adjust(baseColor, { h: -i }));
|
||||
}
|
||||
} else {
|
||||
const incr = Math.floor((MAX_HUE_VALUE - baseHue) / noOfColorNeeded);
|
||||
for (let i = 0; i <= baseHue; i += incr) {
|
||||
colors.push(adjust(baseColor, { h: i }));
|
||||
}
|
||||
}
|
||||
return colors;
|
||||
}
|
||||
|
||||
function getChartDefaultThemeConfig(): XYChartThemeConfig {
|
||||
return {
|
||||
backgroundColor:
|
||||
config.themeVariables?.xyChart?.backgroundColor ||
|
||||
defaultThemeVariables.xyChart.backgroundColor,
|
||||
titleColor:
|
||||
config.themeVariables?.xyChart?.titleColor || defaultThemeVariables.xyChart.titleColor,
|
||||
axisLineColor:
|
||||
|
|
@ -92,8 +75,9 @@ function getChartDefaultThemeConfig(): XYChartThemeConfig {
|
|||
yAxisTickColor:
|
||||
config.themeVariables?.xyChart?.yAxisTickColor ||
|
||||
defaultThemeVariables.xyChart.yAxisTickColor,
|
||||
plotBaseColor:
|
||||
config.themeVariables?.xyChart?.plotBaseColor || defaultThemeVariables.xyChart.plotBaseColor,
|
||||
plotColorPalette:
|
||||
config.themeVariables?.xyChart?.plotColorPalette ||
|
||||
defaultThemeVariables.xyChart.plotColorPalette,
|
||||
};
|
||||
}
|
||||
function getChartDefaultConfig(): XYChartConfig {
|
||||
|
|
@ -250,12 +234,12 @@ function getDrawableElem(): DrawableElem[] {
|
|||
return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig, tmpSVGGElem);
|
||||
}
|
||||
|
||||
function setHeight(height: number) {
|
||||
xyChartConfig.height = height;
|
||||
function getChartThemeConfig() {
|
||||
return xyChartThemeConfig;
|
||||
}
|
||||
|
||||
function setWidth(width: number) {
|
||||
xyChartConfig.width = width;
|
||||
function getChartConfig() {
|
||||
return xyChartConfig;
|
||||
}
|
||||
|
||||
const clear = function () {
|
||||
|
|
@ -264,16 +248,12 @@ const clear = function () {
|
|||
xyChartConfig = getChartDefaultConfig();
|
||||
xyChartData = getChartDefalutData();
|
||||
xyChartThemeConfig = getChartDefaultThemeConfig();
|
||||
plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor)
|
||||
? xyChartThemeConfig.plotBaseColor
|
||||
: plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor);
|
||||
plotColorPalette = xyChartThemeConfig.plotColorPalette;
|
||||
hasSetXAxis = false;
|
||||
hasSetYAxis = false;
|
||||
};
|
||||
|
||||
export default {
|
||||
setWidth,
|
||||
setHeight,
|
||||
getDrawableElem,
|
||||
parseDirective,
|
||||
clear,
|
||||
|
|
@ -292,4 +272,6 @@ export default {
|
|||
setLineData,
|
||||
setBarData,
|
||||
setTmpSVGG,
|
||||
getChartThemeConfig,
|
||||
getChartConfig,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,6 +13,9 @@ import XYChartDB from './xychartDb.js';
|
|||
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
|
||||
|
||||
export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => {
|
||||
const db = diagObj.db as typeof XYChartDB;
|
||||
const themeConfig = db.getChartThemeConfig();
|
||||
const chartConfig = db.getChartConfig();
|
||||
function getDominantBaseLine(horizontalPos: TextHorizontalPos) {
|
||||
return horizontalPos === 'top' ? 'hanging' : 'middle';
|
||||
}
|
||||
|
|
@ -29,19 +32,19 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
|
|||
|
||||
const svg = selectSvgElement(id);
|
||||
const group = svg.append('g').attr('class', 'main');
|
||||
|
||||
const width = 700;
|
||||
const height = 500;
|
||||
const background = group
|
||||
.append('rect')
|
||||
.attr('width', chartConfig.width)
|
||||
.attr('height', chartConfig.height)
|
||||
.attr('class', 'background');
|
||||
|
||||
// @ts-ignore: TODO Fix ts errors
|
||||
configureSvgSize(svg, height, width, true);
|
||||
configureSvgSize(svg, chartConfig.height, chartConfig.width, true);
|
||||
|
||||
svg.attr('viewBox', '0 0 ' + width + ' ' + height);
|
||||
svg.attr('viewBox', '0 0 ' + chartConfig.width + ' ' + chartConfig.height);
|
||||
|
||||
const db = diagObj.db as typeof XYChartDB;
|
||||
background.attr('fill', themeConfig.backgroundColor);
|
||||
|
||||
db.setHeight(height);
|
||||
db.setWidth(width);
|
||||
db.setTmpSVGG(svg.append('g').attr('class', 'mermaid-tmp-group'));
|
||||
|
||||
const shapes: DrawableElem[] = db.getDrawableElem();
|
||||
|
|
|
|||
|
|
@ -245,6 +245,31 @@ class Theme {
|
|||
this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
|
||||
this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
|
||||
|
||||
/* xychart */
|
||||
this.xyChart = {
|
||||
backgroundColor: this.xyChart?.backgroundColor || this.background,
|
||||
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
|
||||
axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
|
||||
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
|
||||
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
|
||||
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
|
||||
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
|
||||
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
|
||||
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
|
||||
plotColorPalette: this.xyChart?.plotColorPalette || [
|
||||
'#FFF4DD',
|
||||
'#FFD8B1',
|
||||
'#FFA07A',
|
||||
'#ECEFF1',
|
||||
'#D6DBDF',
|
||||
'#C3E0A8',
|
||||
'#FFB6A4',
|
||||
'#FFD74D',
|
||||
'#738FA7',
|
||||
'#FFFFF0',
|
||||
],
|
||||
};
|
||||
|
||||
/* requirement-diagram */
|
||||
this.requirementBackground = this.requirementBackground || this.primaryColor;
|
||||
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||||
|
|
|
|||
|
|
@ -251,6 +251,31 @@ class Theme {
|
|||
this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
|
||||
this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
|
||||
|
||||
/* xychart */
|
||||
this.xyChart = {
|
||||
backgroundColor: this.xyChart?.backgroundColor || this.background,
|
||||
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
|
||||
axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
|
||||
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
|
||||
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
|
||||
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
|
||||
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
|
||||
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
|
||||
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
|
||||
plotColorPalette: this.xyChart?.plotColorPalette || [
|
||||
'#3498db',
|
||||
'#2ecc71',
|
||||
'#e74c3c',
|
||||
'#f1c40f',
|
||||
'#bdc3c7',
|
||||
'#ffffff',
|
||||
'#34495e',
|
||||
'#9b59b6',
|
||||
'#1abc9c',
|
||||
'#e67e22',
|
||||
],
|
||||
};
|
||||
|
||||
/* class */
|
||||
this.classText = this.primaryTextColor;
|
||||
|
||||
|
|
|
|||
|
|
@ -283,7 +283,18 @@ class Theme {
|
|||
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
|
||||
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
|
||||
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
|
||||
plotBaseColor: this.xyChart?.plotBaseColor || darken(this.primaryColor, 25),
|
||||
plotColorPalette: this.xyChart?.plotColorPalette || [
|
||||
'#ECECFF',
|
||||
'#8493A6',
|
||||
'#FFC3A0',
|
||||
'#DCDDE1',
|
||||
'#B8E994',
|
||||
'#D1A36F',
|
||||
'#C3CDE6',
|
||||
'#FFB6C1',
|
||||
'#496078',
|
||||
'#F8F3E3',
|
||||
],
|
||||
};
|
||||
|
||||
/* requirement-diagram */
|
||||
|
|
|
|||
|
|
@ -240,6 +240,31 @@ class Theme {
|
|||
this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
|
||||
this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
|
||||
|
||||
/* xychart */
|
||||
this.xyChart = {
|
||||
backgroundColor: this.xyChart?.backgroundColor || this.background,
|
||||
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
|
||||
axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
|
||||
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
|
||||
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
|
||||
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
|
||||
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
|
||||
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
|
||||
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
|
||||
plotColorPalette: this.xyChart?.plotColorPalette || [
|
||||
'#CDE498',
|
||||
'#FF6B6B',
|
||||
'#A0D2DB',
|
||||
'#D7BDE2',
|
||||
'#F0F0F0',
|
||||
'#FFC3A0',
|
||||
'#7FD8BE',
|
||||
'#FF9A8B',
|
||||
'#FAF3E0',
|
||||
'#FFF176',
|
||||
],
|
||||
};
|
||||
|
||||
/* requirement-diagram */
|
||||
this.requirementBackground = this.requirementBackground || this.primaryColor;
|
||||
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||||
|
|
|
|||
|
|
@ -271,6 +271,31 @@ class Theme {
|
|||
this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
|
||||
this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
|
||||
|
||||
/* xychart */
|
||||
this.xyChart = {
|
||||
backgroundColor: this.xyChart?.backgroundColor || this.background,
|
||||
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
|
||||
axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
|
||||
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
|
||||
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
|
||||
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
|
||||
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
|
||||
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
|
||||
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
|
||||
plotColorPalette: this.xyChart?.plotColorPalette || [
|
||||
'#EEE',
|
||||
'#6BB8E4',
|
||||
'#8ACB88',
|
||||
'#C7ACD6',
|
||||
'#E8DCC2',
|
||||
'#FFB2A8',
|
||||
'#FFF380',
|
||||
'#7E8D91',
|
||||
'#FFD8B1',
|
||||
'#FAF3E0',
|
||||
],
|
||||
};
|
||||
|
||||
/* requirement-diagram */
|
||||
this.requirementBackground = this.requirementBackground || this.primaryColor;
|
||||
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||||
|
|
|
|||
Loading…
Reference in New Issue