[IMP] charts: add scales range, type and grid display settings #7350
Conversation
|
|
anhe-odoo
force-pushed
the
master-chart-add_scale_customization-anhe
branch
2 times, most recently
from
59e8688 to
5e593d6
Compare
Task Description This commit aims to add the possibility for the user to customize the axes scale (linear vs logarithmic type and mix/max values) for linear scale. We also add the possibility to show/hide major and minor gridlines (minor gridlines being only available for linear scale and line/scatter chart (for x axis), while avalaible for bar/line/scatter/combo chart for both y axes. Related Task Task: 5159370
This commit extends the axis customization to date type x scale Task: 5159370
anhe-odoo
force-pushed
the
master-chart-add_scale_customization-anhe
branch
from
5e593d6 to
b807af0
Compare
| return undefined; | ||
| } | ||
| if (this.isTimeAxis) { | ||
| const timestamp = this.getTimestampFromInput(input); |
There was a problem hiding this comment.
You should really convert that to a spreadsheet date number (1 is 1/1/0900) - not a js timestamp. If I add a limit then remove the date format, I get an huge value that doesn't make sense (eg. 1756425600000). If you use spreadsheet date numbers, it would make sense even after removing the format.
| <div class="d-flex"> | ||
| <div class="w-50"> | ||
| <span class="o-section-subtitle my-0">Minimum</span> | ||
| <input |
There was a problem hiding this comment.
After #7023 we will avoid using simple inputs, use the new components instead :)
| import { LineChartDefinition, LineChartRuntime } from "./line_chart"; | ||
|
|
||
| export interface ScatterChartDefinition | ||
| extends Omit<LineChartDefinition, "type" | "stacked" | "cumulative"> { |
There was a problem hiding this comment.
Uh ? scatter cahrts are not zoomable ? I did a fix and all for zoomable scatter charts https://www.odoo.com/odoo/2328/tasks/5143146
Why change that? And why in this task ?
| readonly min?: number; | ||
| readonly max?: number; | ||
| readonly scaleType?: AxisScaleType; | ||
| readonly grid?: AxisGridDesign; |
There was a problem hiding this comment.
nitpick: probably more clear to have a boolean showMajor/minorGridLine rather than design.grid.major
| @@ -0,0 +1,69 @@ | |||
| import { Chart } from "chart.js"; | |||
There was a problem hiding this comment.
Are minor grid line really not a default chartjs option ? Idk if it's worth doing a plugin for that, IMO minor grid lines are kinda useless
| await mountChartSidePanel(chartId, model); | ||
| await openChartDesignSidePanel(model, env, fixture, chartId); | ||
| let definition = model.getters.getChartDefinition(chartId) as LineChartDefinition; | ||
| expect(definition.axesDesign?.x?.grid).toEqual({ major: false, minor: false }); | ||
| setCheckboxValueAndTrigger(".o-axis-grid-major input", true, "change"); | ||
| await nextTick(); | ||
| definition = model.getters.getChartDefinition(chartId) as LineChartDefinition; | ||
| expect(definition.axesDesign?.x?.grid).toEqual({ major: true, minor: false }); | ||
| const element = fixture.querySelector(".o-axis-grid-minor input"); | ||
| expect(element).toBeNull(); |
There was a problem hiding this comment.
same here. and use toHaveCount
| createChart(model, { type: "bar" }, chartId); | ||
| await mountSpreadsheet(); | ||
| expect(spyRegister).toHaveBeenCalledTimes(7); | ||
| expect(spyRegister).toHaveBeenCalledTimes(8); |
There was a problem hiding this comment.
Is it possible to change the 7 to regiustry.getKeys().length or something dynamic instead ? It's a bit annoying having to update the 2 tests each time 🙈
| */ | ||
| export const timeFormatLuxonCompatible = | ||
| /^((d|dd|m|mm|yyyy|yy|hh|h|ss|a)(-|:|\s|\/))*(d|dd|m|mm|yyyy|yy|hh|h|ss|a)$/i; | ||
| /^((d|dd|m|mm|mmm|yyyy|yy|hh|h|ss|a)(-|:|\s|\/))*(d|dd|m|mm|mmm|yyyy|yy|hh|h|ss|a)$/i; |
| A4: "=DATE(2022,1,3)", | ||
| A5: "=DATE(2022,1,4)", | ||
| }); | ||
| setFormat(model, "A2:A5", "m/d/yyyy"); |
There was a problem hiding this comment.
setFormat is useless if you already use DATE formula
There was a problem hiding this comment.
and once again you probably can get away with a single point, and a one-line to create the model
| } | ||
| ); | ||
|
|
||
| test("can edit chart time axis limits", async () => { |
There was a problem hiding this comment.
move the test to the line_chart_plugin.test.ts file
3 participants
Task Description
This commit aims to add the possibility for the user to customize the axes scale (linear vs logarithmic type and mix/max values) for linear scale. We also add the possibility to show/hide major and minor gridlines (minor gridlines being only available for linear scale and line/scatter chart (for x axis), while available for bar/line/scatter/combo chart for both y axes.
Related Task