The Chart Builder is a proof-of-concept app to understand the feasibility of using a CSV file (or SPARQL query) to generate and customise a chart or data visualisation
conditionally renders axis customisation controls when 'manual' tick mode is selected
where 'auto' tick mode is selected the xAxisNTicks and yAxisNTicks properties will conditionally show (allowing users to set the number of ticks to show).
layout.ts:
imports getXandYAxisLabelsConfig function from axisTickLabels.ts and calls it to obtain the X and Y axis tick label config. The x and y axis tick label configs are then spread into the chart layout object.
axisTickLabels.ts:
constructs the configs for x and y axis tick labels according the user selected mode.
in auto mode a simple 'auto' config object is returned. The only user properties set are the tickangle and nticks (number of ticks to show)
in manual mode an 'array' config is returned which the user can configure in several ways 1) truncate the label length, 2) customise the start label, 3) customise the last label, 4) set the interval at which labels are shown.
Update to ChartPropertiesSchema
Additional properties added to X and Y axes xAxisNTicks and yAxisNTicks respectively that allow the user to specify a number of ticks to show when the axis is configured in auto mode. This can be a useful alternative to the manual configuration mode in some instances. It also helps to retain the X values display in the rollover hover info.
Renamed the xAxisDTick/yAxisDTick property to xAxisTickInterval/yAxisTickInterval to make it explicit that we aren't making use of the Plotly.js dtick property (which applies to axis labels that are constructed based on a starting tick0 value and a series of dtick increments).
chartDefinition.ts:
logic to truncate the x values has been removed and relocated to axisTickLabels.ts. This implementation is preferable as the actual x values are now left unchanged even when the tick labels are truncated.
Add new chart properties to the ChartPropertiesSchema
xAxisTickMode: allows user to select either auto or manually configured X axis tick labels
yAxisTickMode: allows user to select either auto or manually configured Y axis tick labels
xAxisTickLabelLength: allows user to set the X axis tick labels length. X values will be truncated to this length
yAxisTickLabelLength: allows user to set the Y axis tick labels length. Y values will be truncated to this length
xAxisDTick: allows the user to set the interval at which X axis tick labels show for a given set of X axis values
yAxisDTick: allows the user to set the interval at which Y axis tick labels show for a given set of Y axis values
xAxisLastTickLabel: allows user to set a custom last X axis tick label (sometimes required if the tick interval doesn't divide cleanly into the number of X values)
yAxisLastTickLabel: allows user to set a custom last Y axis tick label (sometimes required if the tick interval doesn't divide cleanly into the number of Y values)
xAxisFirstTickLabel: allows user to set a custom first X axis tick label
yAxisFirstTickLabel: allows user to set a custom first Y axis tick label
charlesons
commented
2 years ago
Implement axis tick label customisation options
SidePanel.tsx:
layout.ts:
axisTickLabels.ts:
Update to ChartPropertiesSchema
Additional properties added to X and Y axes xAxisNTicks and yAxisNTicks respectively that allow the user to specify a number of ticks to show when the axis is configured in auto mode. This can be a useful alternative to the manual configuration mode in some instances. It also helps to retain the X values display in the rollover hover info.
Renamed the xAxisDTick/yAxisDTick property to xAxisTickInterval/yAxisTickInterval to make it explicit that we aren't making use of the Plotly.js dtick property (which applies to axis labels that are constructed based on a starting tick0 value and a series of dtick increments).
chartDefinition.ts:
Add new chart properties to the ChartPropertiesSchema