-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[IMP] charts: handles multiple bars in combo chart
Task Description This task adds the possibility to choose which series are bar and line in a combo chart, make the user able to change this for each data series in the design pannel. When there is no bar series in the set, the first one is always considered as a bar chart, to stay consistent with the previous behavior. Related Task closes #4957 Task: 4164614 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
- Loading branch information
Showing
12 changed files
with
400 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
src/components/side_panel/chart/combo_chart/combo_chart_design_panel.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { _t } from "../../../../translation"; | ||
| import { ComboChartDefinition } from "../../../../types/chart/combo_chart"; | ||
| import { DispatchResult, UID } from "../../../../types/index"; | ||
| import { ChartWithAxisDesignPanel } from "../chart_with_axis/design_panel"; | ||
|
|
||
| interface Props { | ||
| figureId: UID; | ||
| definition: ComboChartDefinition; | ||
| canUpdateChart: (figureID: UID, definition: Partial<ComboChartDefinition>) => DispatchResult; | ||
| updateChart: (figureId: UID, definition: Partial<ComboChartDefinition>) => DispatchResult; | ||
| } | ||
|
|
||
| export class ComboChartDesignPanel extends ChartWithAxisDesignPanel<Props> { | ||
| static template = "o-spreadsheet-ComboChartDesignPanel"; | ||
| seriesTypeChoices = [ | ||
| { value: "bar", label: _t("Bar") }, | ||
| { value: "line", label: _t("Line") }, | ||
| ]; | ||
|
|
||
| updateDataSeriesType(type: "bar" | "line") { | ||
| const dataSets = [...this.props.definition.dataSets]; | ||
| if (!dataSets?.[this.state.index]) { | ||
| return; | ||
| } | ||
| dataSets[this.state.index] = { | ||
| ...dataSets[this.state.index], | ||
| type, | ||
| }; | ||
| this.props.updateChart(this.props.figureId, { dataSets }); | ||
| } | ||
|
|
||
| getDataSeriesType() { | ||
| const dataSets = this.props.definition.dataSets; | ||
| if (!dataSets?.[this.state.index]) { | ||
| return "bar"; | ||
| } | ||
| return dataSets[this.state.index].type ?? "line"; | ||
| } | ||
| } |
147 changes: 147 additions & 0 deletions
147
src/components/side_panel/chart/combo_chart/combo_chart_design_panel.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| <templates> | ||
| <t t-name="o-spreadsheet-ComboChartDesignPanel"> | ||
| <GeneralDesignEditor | ||
| figureId="props.figureId" | ||
| definition="props.definition" | ||
| updateChart="props.updateChart"> | ||
| <t t-set-slot="general-extension"> | ||
| <Section class="'pt-0'"> | ||
| <t t-set-slot="title">Legend position</t> | ||
| <select | ||
| t-att-value="props.definition.legendPosition ?? 'top'" | ||
| class="o-input" | ||
| t-on-change="this.updateLegendPosition"> | ||
| <option value="none">None</option> | ||
| <option value="top">Top</option> | ||
| <option value="bottom">Bottom</option> | ||
| <option value="left">Left</option> | ||
| <option value="right">Right</option> | ||
| </select> | ||
| </Section> | ||
| <Section class="'pt-0'"> | ||
| <t t-set-slot="title">Values</t> | ||
| <Checkbox | ||
| name="'showValues'" | ||
| label="showValuesLabel" | ||
| value="props.definition.showValues" | ||
| onChange="showValues => props.updateChart(this.props.figureId, {showValues})" | ||
| /> | ||
| </Section> | ||
| </t> | ||
| </GeneralDesignEditor> | ||
| <SidePanelCollapsible collapsedAtInit="true"> | ||
| <t t-set-slot="title">Data series</t> | ||
| <t t-set-slot="content"> | ||
| <Section class="'pt-0 pb-0'"> | ||
| <select | ||
| class="o-input data-series-selector" | ||
| t-model="state.label" | ||
| t-on-change="(ev) => this.updateSerieEditor(ev)"> | ||
| <t t-foreach="getDataSeries()" t-as="serie" t-key="serie_index"> | ||
| <option | ||
| t-att-value="serie" | ||
| t-att-selected="state.index === serie_index" | ||
| t-esc="serie" | ||
| /> | ||
| </t> | ||
| </select> | ||
| <Section class="'px-0'"> | ||
| <div class="d-flex align-items-center"> | ||
| <t t-set-slot="title">Series color</t> | ||
| <RoundColorPicker | ||
| currentColor="getDataSerieColor()" | ||
| onColorPicked.bind="updateDataSeriesColor" | ||
| /> | ||
| </div> | ||
| </Section> | ||
| <Section class="'pt-0 px-0 o-vertical-axis-selection'" t-if="canHaveTwoVerticalAxis"> | ||
| <t t-set-slot="title">Vertical axis</t> | ||
| <RadioSelection | ||
| choices="axisChoices" | ||
| selectedValue="getDataSerieAxis()" | ||
| name="'axis'" | ||
| onChange.bind="updateDataSeriesAxis" | ||
| /> | ||
| </Section> | ||
| <Section class="'pt-0 px-0 o-series-type-selection'"> | ||
| <t t-set-slot="title">Serie type</t> | ||
| <RadioSelection | ||
| choices="seriesTypeChoices" | ||
| selectedValue="getDataSeriesType()" | ||
| name="'seriesType'" | ||
| onChange.bind="updateDataSeriesType" | ||
| /> | ||
| </Section> | ||
| <Section class="'pt-0 px-0'"> | ||
| <t t-set-slot="title">Series name</t> | ||
| <input | ||
| class="o-input o-serie-label-editor" | ||
| type="text" | ||
| t-att-value="getDataSerieLabel()" | ||
| t-on-change="(ev) => this.updateDataSeriesLabel(ev)" | ||
| /> | ||
| </Section> | ||
| <Section class="'pt-0 px-0 o-show-trend-line'" t-if="!props.definition.horizontal"> | ||
| <t t-set-slot="title">Trend line</t> | ||
| <t t-set="showTrendLineLabel">Show trend line</t> | ||
| <t t-set="trend" t-value="getTrendLineConfiguration()"/> | ||
| <t t-set="trendType" t-value="getTrendType(trend)"/> | ||
| <Checkbox | ||
| name="'showTrendLine'" | ||
| label="showTrendLineLabel" | ||
| value="trend !== undefined and trend.display" | ||
| onChange.bind="toggleDataTrend" | ||
| /> | ||
| <div t-if="trend !== undefined and trend.display"> | ||
| <div class="d-flex py-2"> | ||
| <div class="w-100"> | ||
| <span class="o-section-subtitle">Type</span> | ||
| <select class="o-input trend-type-selector" t-on-change="this.onChangeTrendType"> | ||
| <option value="linear" t-att-selected="trendType === 'linear'">Linear</option> | ||
| <option value="exponential" t-att-selected="trendType === 'exponential'"> | ||
| Exponential | ||
| </option> | ||
| <option value="polynomial" t-att-selected="trendType === 'polynomial'"> | ||
| Polynomial | ||
| </option> | ||
| <option value="logarithmic" t-att-selected="trendType === 'logarithmic'"> | ||
| Logarithmic | ||
| </option> | ||
| </select> | ||
| </div> | ||
| <div class="w-50 ms-3" t-if="trendType === 'polynomial'"> | ||
| <span class="o-section-subtitle">Degree</span> | ||
| <input | ||
| t-att-value="trend.order" | ||
| type="number" | ||
| class="w-100 o-input trend-order-input" | ||
| t-on-change="this.onChangePolynomialDegree" | ||
| min="1" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div class="d-flex align-items-center"> | ||
| <span class="o-section-subtitle my-0 pe-2">Trend line color</span> | ||
| <RoundColorPicker | ||
| currentColor="getTrendLineColor()" | ||
| onColorPicked.bind="updateTrendLineColor" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </Section> | ||
| </Section> | ||
| </t> | ||
| </SidePanelCollapsible> | ||
| <SidePanelCollapsible collapsedAtInit="true"> | ||
| <t t-set-slot="title">Axes</t> | ||
| <t t-set-slot="content"> | ||
| <AxisDesignEditor | ||
| axesList="axesList" | ||
| figureId="props.figureId" | ||
| definition="props.definition" | ||
| updateChart="props.updateChart" | ||
| /> | ||
| </t> | ||
| </SidePanelCollapsible> | ||
| </t> | ||
| </templates> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.