feat: Change precedence of styling

This commit is contained in:
Sidharth Vinod 2024-04-16 08:44:21 +05:30
parent 253adcb0eb
commit 3357844a1f
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
2 changed files with 7 additions and 21 deletions

View File

@ -1,4 +1,4 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Quadrant Chart', () => { describe('Quadrant Chart', () => {
it('should render if only chart type is provided', () => { it('should render if only chart type is provided', () => {

View File

@ -1,7 +1,7 @@
import { scaleLinear } from 'd3'; import { scaleLinear } from 'd3';
import { log } from '../../logger.js';
import type { BaseDiagramConfig, QuadrantChartConfig } from '../../config.type.js'; import type { BaseDiagramConfig, QuadrantChartConfig } from '../../config.type.js';
import defaultConfig from '../../defaultConfig.js'; import defaultConfig from '../../defaultConfig.js';
import { log } from '../../logger.js';
import { getThemeVariables } from '../../themes/theme-default.js'; import { getThemeVariables } from '../../themes/theme-default.js';
import type { Point } from '../../types.js'; import type { Point } from '../../types.js';
@ -202,6 +202,7 @@ export class QuadrantBuilder {
this.config = this.getDefaultConfig(); this.config = this.getDefaultConfig();
this.themeConfig = this.getDefaultThemeConfig(); this.themeConfig = this.getDefaultThemeConfig();
this.data = this.getDefaultData(); this.data = this.getDefaultData();
this.classes = {};
log.info('clear called'); log.info('clear called');
} }
@ -486,19 +487,8 @@ export class QuadrantBuilder {
const points: QuadrantPointType[] = this.data.points.map((point) => { const points: QuadrantPointType[] = this.data.points.map((point) => {
const classStyles = this.classes[point.className as keyof typeof this.classes]; const classStyles = this.classes[point.className as keyof typeof this.classes];
if (classStyles !== undefined) { if (classStyles) {
if (classStyles.color !== undefined) { point = { ...classStyles, ...point };
point.color = classStyles.color;
}
if (classStyles.radius !== undefined) {
point.radius = classStyles.radius;
}
if (classStyles.strokeColor !== undefined) {
point.strokeColor = classStyles.strokeColor;
}
if (classStyles.strokeWidth !== undefined) {
point.strokeWidth = classStyles.strokeWidth;
}
} }
const props: QuadrantPointType = { const props: QuadrantPointType = {
x: xAxis(point.x), x: xAxis(point.x),
@ -515,12 +505,8 @@ export class QuadrantBuilder {
fontSize: this.config.pointLabelFontSize, fontSize: this.config.pointLabelFontSize,
rotation: 0, rotation: 0,
}, },
strokeColor: strokeColor: point.strokeColor || this.themeConfig.quadrantPointFill,
point.strokeColor !== undefined && point.strokeColor !== '' strokeWidth: point.strokeWidth || '0px',
? point.strokeColor
: this.themeConfig.quadrantPointFill,
strokeWidth:
point.strokeWidth !== undefined && point.strokeWidth !== '' ? point.strokeWidth : '0px',
}; };
return props; return props;
}); });