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

Added a toggle to hide axes of chart widget (#2053)

Browse source 
* Added option to enable and disable axis

* Resolved a typo
This commit is contained in:
Muhsin Shah C P 2022-02-01 11:13:49 +05:30 committed by GitHub
parent 737a89b93f
commit 1ee2784c59
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,7 +10,7 @@ export const Chart = function Chart({ width, height, darkMode, properties, style
const [loadingState, setLoadingState] = useState(false);
const { padding, visibility, disabledState } = styles;
const { title, markerColor, showGridLines, type, data, jsonDescription, plotFromJson } = properties;
const { title, markerColor, showGridLines, type, data, jsonDescription, plotFromJson, showAxes } = properties;
useEffect(() => {
const loadingStateProperty = properties.loadingState;
@ -56,12 +56,14 @@ export const Chart = function Chart({ width, height, darkMode, properties, style
showline: true,
color: fontColor,
automargin: true,
visible: showAxes,
},
yaxis: {
showgrid: showGridLines,
showline: true,
color: fontColor,
automargin: true,
visible: showAxes,
},
margin: {
l: padding,

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

@ -173,6 +173,7 @@ export const componentTypes = [
data: { type: 'json', displayName: 'Data' },
loadingState: { type: 'code', displayName: 'Loading State' },
markerColor: { type: 'color', displayName: 'Marker color' },
showAxes: { type: 'toggle', displayName: 'Show axes' },
showGridLines: { type: 'toggle', displayName: 'Show grid lines' },
type: {
type: 'select',
@ -203,6 +204,7 @@ export const componentTypes = [
properties: {
title: { value: 'This title can be changed' },
markerColor: { value: '#CDE1F8' },
showAxes: { value: true },
showGridLines: { value: true },
plotFromJson: { value: false },
loadingState: { value: `{{false}}` },

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

@ -172,6 +172,19 @@ class Chart extends React.Component {
});
}
items.push({
title: 'Show axes',
children: renderElement(
component,
componentMeta,
paramUpdated,
dataQueries,
'showAxes',
'properties',
currentState
),
});
items.push({
title: 'Show grid lines',
children: renderElement(