Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Feature: Ability to toggle chart grid lines

Browse source
This commit is contained in:
navaneeth 2021-05-15 18:35:01 +05:30
parent 8cca2862be
commit c2ee24662a
3 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -35,12 +35,14 @@ export const Chart = function Chart({
const markerColorProperty = component.definition.properties.markerColor;
const markerColor = markerColorProperty ? markerColorProperty.value : 'red';
const gridLinesProperty = component.definition.properties.showGridLines;
const showGridLines = gridLinesProperty ? gridLinesProperty.value : true;
const chartData = [{
type: chartType || 'line',
x: data.map((item) => item["x"]),
y: data.map((item) => item["y"]),
marker: { color: markerColor },
xaxis: { showgrid: false }
marker: { color: markerColor }
}];
const layout = {
@ -48,11 +50,11 @@ export const Chart = function Chart({
height,
title,
xaxis: {
showgrid: true,
showgrid: showGridLines,
showline: true
},
yaxis: {
showgrid: true,
showgrid: showGridLines,
showline: true
}
}

2
frontend/src/Editor/Components/components.js
View file

@ -127,6 +127,7 @@ export const componentTypes = [
data: { type: 'json', displayName: 'Data' },
loadingState: { type: 'code', displayName: 'Loading State'},
markerColor: { type: 'color', displayName: 'Marker color'},
showGridLines: { type: 'toggle', displayName: 'Show grid lines'},
type: { type: 'select', displayName: 'Chart type', options: [
{ name: 'Line', value: 'line' },
{ name: 'Bar', value: 'bar' }
@ -143,6 +144,7 @@ export const componentTypes = [
properties: {
title: { value: 'This title can be changed' },
markerColor: { value: 'red' },
showGridLines: { value: true },
loadingState: { value: `{{false}}` },
type: { value: `line` },
data: { value: `[

2
frontend/src/Editor/Inspector/Components/Chart.jsx
View file

@ -83,6 +83,8 @@ class Chart extends React.Component {
{renderElement(component, componentMeta, paramUpdated, dataQueries, 'loadingState', 'properties', currentState)}
{renderElement(component, componentMeta, paramUpdated, dataQueries, 'markerColor', 'properties', currentState)}
{renderElement(component, componentMeta, paramUpdated, dataQueries, 'showGridLines', 'properties', currentState)}
</div>
);
}