-
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] chart: harmonize chart titles & paddings
This commit harmonizes the chart titles and paddings across all chart types. Some things to note: - gauge chart matches title/padding sizes with our chartJS charts. The scorecards do their own thing. - there is now only 2 font colors in the charts: the normal font color and the muted font color (+ their high contrast variants). Titles are now using the muted font color. - muted font color is `#666666`, which is ChartJs default color ( `Chart.defaults.color`) closes #5194 Task: 4316044 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
- Loading branch information
1 parent
ac37929
commit 9ef03b3
Showing
21 changed files
with
283 additions
and
331 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
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
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
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 |
|---|---|---|
| @@ -1,80 +1,18 @@ | ||
| import { ChartOptions } from "chart.js"; | ||
| import { DEFAULT_CHART_PADDING } from "../../../../constants"; | ||
| import { | ||
| BarChartDefinition, | ||
| ChartWithDataSetDefinition, | ||
| GenericDefinition, | ||
| LineChartDefinition, | ||
| PieChartDefinition, | ||
| WaterfallChartDefinition, | ||
| } from "../../../../types/chart"; | ||
| import { CHART_PADDING, CHART_PADDING_BOTTOM, CHART_PADDING_TOP } from "../../../../constants"; | ||
| import { ChartWithDataSetDefinition, GenericDefinition } from "../../../../types/chart"; | ||
|
|
||
| type ChartLayout = ChartOptions["layout"]; | ||
|
|
||
| export function getCommonChartLayout( | ||
| export function getChartLayout( | ||
| definition: GenericDefinition<ChartWithDataSetDefinition> | ||
| ): ChartLayout { | ||
| // TODO FIXME: this is unused ATM. All the charts should probably use this instead oh whatever padding they are using now | ||
| // also look into how DEFAULT_CHART_PADDING is used in scorecards, it look strange | ||
| return { | ||
| padding: { | ||
| left: DEFAULT_CHART_PADDING, | ||
| right: DEFAULT_CHART_PADDING, | ||
| top: definition.title?.text ? DEFAULT_CHART_PADDING / 2 : DEFAULT_CHART_PADDING + 5, | ||
| bottom: DEFAULT_CHART_PADDING, | ||
| left: CHART_PADDING, | ||
| right: CHART_PADDING, | ||
| top: CHART_PADDING_TOP, | ||
| bottom: CHART_PADDING_BOTTOM, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| export function getBarChartLayout(definition: GenericDefinition<BarChartDefinition>): ChartLayout { | ||
| return { | ||
| padding: computeChartPadding({ | ||
| displayTitle: !!definition.title?.text, | ||
| displayLegend: definition.legendPosition === "top", | ||
| }), | ||
| }; | ||
| } | ||
|
|
||
| export function getLineChartLayout( | ||
| definition: GenericDefinition<LineChartDefinition> | ||
| ): ChartLayout { | ||
| return { | ||
| padding: computeChartPadding({ | ||
| displayTitle: !!definition.title?.text, | ||
| displayLegend: definition.legendPosition === "top", | ||
| }), | ||
| }; | ||
| } | ||
|
|
||
| export function getPieChartLayout(definition: PieChartDefinition): ChartLayout { | ||
| return { | ||
| padding: { left: 20, right: 20, top: definition.title ? 10 : 25, bottom: 10 }, | ||
| }; | ||
| } | ||
|
|
||
| export function getWaterfallChartLayout(definition: WaterfallChartDefinition): ChartLayout { | ||
| return { | ||
| padding: { left: 20, right: 20, top: definition.title ? 10 : 25, bottom: 10 }, | ||
| }; | ||
| } | ||
|
|
||
| function computeChartPadding({ | ||
| displayTitle, | ||
| displayLegend, | ||
| }: { | ||
| displayTitle: boolean; | ||
| displayLegend: boolean; | ||
| }): { | ||
| top: number; | ||
| bottom: number; | ||
| left: number; | ||
| right: number; | ||
| } { | ||
| let top = 25; | ||
| if (displayTitle) { | ||
| top = 0; | ||
| } else if (displayLegend) { | ||
| top = 10; | ||
| } | ||
| return { left: 20, right: 20, top, bottom: 10 }; | ||
| } |
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 |
|---|---|---|
| @@ -1,25 +1,30 @@ | ||
| import { TitleOptions } from "chart.js"; | ||
| import { _DeepPartialObject } from "chart.js/dist/types/utils"; | ||
| import { DEFAULT_CHART_FONT_SIZE } from "../../../../constants"; | ||
| import { CHART_PADDING, CHART_TITLE_FONT_SIZE } from "../../../../constants"; | ||
| import { _t } from "../../../../translation"; | ||
| import { ChartWithDataSetDefinition } from "../../../../types/chart"; | ||
| import { chartFontColor } from "../chart_common"; | ||
| import { chartMutedFontColor } from "../chart_common"; | ||
|
|
||
| export function getChartTitle( | ||
| definition: ChartWithDataSetDefinition | ||
| ): _DeepPartialObject<TitleOptions> { | ||
| const chartTitle = definition.title; | ||
| const fontColor = chartFontColor(definition.background); | ||
| const fontColor = chartMutedFontColor(definition.background); | ||
| return { | ||
| display: !!chartTitle.text, | ||
| text: _t(chartTitle.text!), | ||
| color: chartTitle?.color ?? fontColor, | ||
| align: | ||
| chartTitle.align === "center" ? "center" : chartTitle.align === "right" ? "end" : "start", | ||
| font: { | ||
| size: DEFAULT_CHART_FONT_SIZE, | ||
| size: CHART_TITLE_FONT_SIZE, | ||
| weight: chartTitle.bold ? "bold" : "normal", | ||
| style: chartTitle.italic ? "italic" : "normal", | ||
| }, | ||
| padding: { | ||
| // Disable title top/left/right padding to use the chart padding instead. | ||
| // The legend already has a top padding, so bottom padding is useless for the title there. | ||
| bottom: definition.legendPosition === "top" ? 0 : CHART_PADDING, | ||
| }, | ||
| }; | ||
| } |
Oops, something went wrong.