Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-05 22:38:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #13132 from ToolJet/fix/chart-border

Browse source 
Added chart border property and removed white background color
This commit is contained in:
Johnson Cherian 2025-07-02 17:19:33 +05:30 committed by GitHub
commit 61c03fdaa3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 28 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/AppBuilder/WidgetManager/widgets/chart.js
View file

@ -138,6 +138,15 @@ export const chartConfig = {
displayName: 'Background color',
validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
},
borderColor: {
type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },
defaultValue: 'var(--cc-default-border)',
},
accordian: 'container',
},
padding: {
type: 'code',
displayName: 'Padding',
@ -233,6 +242,7 @@ export const chartConfig = {
borderRadius: { value: '{{4}}' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
borderColor: { value: 'var(--cc-default-border)' },
},
},
};

14
frontend/src/Editor/Components/Chart.jsx
View file

@ -8,7 +8,7 @@ import { isEqual } from 'lodash';
import { deepClone } from '@/_helpers/utilities/utils.helpers';
import useStore from '@/AppBuilder/_stores/store';
import { shallow } from 'zustand/shallow';
import { getCssVarValue } from './utils';
import { getCssVarValue, getModifiedColor } from './utils';
var tinycolor = require('tinycolor2');
@ -33,11 +33,11 @@ export const Chart = function Chart({
return '#fff';
};
const { padding, visibility, disabledState, boxShadow, backgroundColor, borderRadius } = styles;
const { padding, visibility, disabledState, boxShadow, backgroundColor, borderRadius, borderColor } = styles;
const { title, markerColor, showGridLines, type, data, jsonDescription, plotFromJson, showAxes, barmode } =
properties;
const modifiedBackgroundColor = getCssVarValue(document.documentElement, backgroundColor);
const modifiedBackgroundColor = getModifiedColor(backgroundColor, 0);
const modifiedMarkerColor = getCssVarValue(document.documentElement, markerColor);
const modifiedGridLines = getCssVarValue(document.documentElement, 'var(--cc-weak-border)');
const modifiedTextColor = getCssVarValue(document.documentElement, 'var(--cc-primary-text)');
@ -55,7 +55,8 @@ export const Chart = function Chart({
width: width - 4,
height,
display: visibility ? '' : 'none',
background: darkMode ? '#1f2936' : 'white',
// background: darkMode ? '#1f2936' : 'white',
border: `1px solid ${borderColor}`,
boxShadow,
borderRadius,
};
@ -82,6 +83,7 @@ export const Chart = function Chart({
? '#1f2936'
: '#fff'
: modifiedBackgroundColor;
const fontColor = getColor(updatedBgColor);
const chartTitle = plotFromJson ? chartLayout?.title ?? title : title;
@ -105,8 +107,8 @@ export const Chart = function Chart({
}, [JSON.stringify(chartLayout, chartTitle)]);
const layout = {
width: width - 4,
height,
width: width - 6,
height: height - 4,
plot_bgcolor: updatedBgColor,
paper_bgcolor: updatedBgColor,
title: {

10
server/src/modules/apps/services/widget-config/chart.js
View file

@ -138,6 +138,15 @@ export const chartConfig = {
displayName: 'Background color',
validation: { schema: { type: 'string' }, defaultValue: 'var(--cc-surface1-surface)' },
},
borderColor: {
type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },
defaultValue: 'var(--cc-default-border)',
},
accordian: 'container',
},
padding: {
type: 'code',
displayName: 'Padding',
@ -233,6 +242,7 @@ export const chartConfig = {
borderRadius: { value: '{{4}}' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
borderColor: { value: 'var(--cc-default-border)' },
},
},
};