Skip to content

Removes borders from bar charts #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sakari-malkki merged 5 commits into from
Apr 1, 2025
Merged

Removes borders from bar charts #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b594690
Removes bar and column borders and adds more stories to cover cases w…
sakari-malkki Mar 21, 2025
73aa0a3
Sonar fix: removes unused import
sakari-malkki Mar 21, 2025
407f584
Use default theme to define bar and column borders
sakari-malkki Mar 24, 2025
77d7e54
Remove unused imports
sakari-malkki Mar 24, 2025
89d9ac6
Restore storybook example with long numeric labels
sakari-malkki Apr 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/core/chartOptions/basicHorizontalBarchartOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const basicHorizontalBarChartOptions = (view: View, locale: string, optio
yAxis: {
...commonBasicHorizontalBarChartYAxisOptions(view, locale),
softMin: 0,
max: 100
max: 100,
},
legend: { enabled: false },
plotOptions: {
Expand Down
2 changes: 1 addition & 1 deletion src/core/chartOptions/basicVerticalBarChartOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const basicVerticalBarChartOptions = (view: View, locale: string, options
...getTimeSeriesOptions(view.visualizationSettings.timeVariableIntervals, view.visualizationSettings.timeSeriesStartingPoint),
dataLabels: {
...commonDatalabelsOptions(view, locale)
},
}
},
},
exporting: {
Expand Down
3 changes: 1 addition & 2 deletions src/core/chartOptions/chartOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const commonYAxisOptions: YAxisOptions = {
color: '#000',
width: 1
}
]
],
}

export const commonDatalabelsOptions = (view: View, locale: string): PlotSeriesDataLabelsOptions => {
Expand Down Expand Up @@ -135,4 +135,3 @@ export const commonLegendStyleOptions: LegendOptions = {
color: 'black',
}
};

2 changes: 1 addition & 1 deletion src/core/chartOptions/percentHorizontalBarChartOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const percentHorizontalBarChartOptions = (view: View, locale: string, opt
},
plotOptions: {
bar: {
stacking: 'percent'
stacking: 'percent',
},
series: {
dataLabels: {
Expand Down
2 changes: 1 addition & 1 deletion src/core/chartOptions/stackedHorizontalBarChartOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const stackedHorizontalBarChartOptions = (view: View, locale: string, opt
},
plotOptions: {
bar: {
stacking: 'normal'
stacking: 'normal',
},
series: {
dataLabels: {
Expand Down
2 changes: 1 addition & 1 deletion src/core/chartOptions/stackedVerticalBarChartOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const stackedVerticalBarChartOptions = (view: View, locale: string, optio
},
plotOptions: {
column: {
stacking: 'normal'
stacking: 'normal',
},
series: {
...getTimeSeriesOptions(view.visualizationSettings.timeVariableIntervals, view.visualizationSettings.timeSeriesStartingPoint),
Expand Down
8 changes: 6 additions & 2 deletions src/core/highcharts/themes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,11 +235,15 @@ export const defaultTheme: (locale: string) => Highcharts.Options = (locale) =>
},
column: {
groupPadding: 0.2,
pointPadding: 0.01
pointPadding: 0.01,
borderRadius: 0,
borderWidth: 0
},
bar: {
groupPadding: 0.2,
pointPadding: 0.01
pointPadding: 0.01,
borderRadius: 0,
borderWidth: 0
},
series: {
animation : false
Expand Down
9 changes: 7 additions & 2 deletions src/stories/chartstories/horizontal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Meta, StoryObj } from '@storybook/react';
import { Chart } from '../../react';
import {
HORIZONTAL_BAR_CHART_ASCENDING, HORIZONTAL_BAR_WITH_LONG_NUMERIC_LABELS, SELECTABLE_HORIZONTAL_BAR_CHART
HORIZONTAL_BAR_CHART_ASCENDING, SELECTABLE_HORIZONTAL_BAR_CHART, HORIZONTAL_BAR_CHART_WITH_ZERO_AND_NEGATIVE, HORIZONTAL_BAR_WITH_LONG_NUMERIC_LABELS
} from '../fixtures/horizontalBarChart';

export default {
Expand All @@ -22,6 +22,11 @@ export const Selectable = {

export const LongNumericLabels = {
name: 'Long numeric labels',
args: HORIZONTAL_BAR_WITH_LONG_NUMERIC_LABELS,
args: HORIZONTAL_BAR_WITH_LONG_NUMERIC_LABELS
} satisfies StoryObj<typeof Chart>;

export const WithZeroAndNegative = {
name: 'With zeroes',
args: HORIZONTAL_BAR_CHART_WITH_ZERO_AND_NEGATIVE,
} satisfies StoryObj<typeof Chart>;

4 changes: 2 additions & 2 deletions src/stories/chartstories/pyramid.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Chart } from '../../react';
import {
PYRAMID_CHART,
PYRAMID_CHART_LARGE_DATASET,
PYRAMID_CHART_WITH_SELECTABLES
PYRAMID_CHART_WITH_SELECTABLES,
} from '../fixtures/pyramidChart';

export default {
Expand All @@ -25,4 +25,4 @@ export const LargeDataset = {
export const Selectable = {
name: 'Selectable',
args: PYRAMID_CHART_WITH_SELECTABLES,
} satisfies StoryObj<typeof Chart>;
} satisfies StoryObj<typeof Chart>;
207 changes: 207 additions & 0 deletions src/stories/fixtures/horizontalBarChart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -849,3 +849,210 @@ export const HORIZONTAL_BAR_WITH_LONG_NUMERIC_LABELS: { pxGraphData: IQueryVisua
selectedVariableCodes: {}
}

export const HORIZONTAL_BAR_CHART_WITH_ZERO_AND_NEGATIVE: { pxGraphData: IQueryVisualizationResponse, selectedVariableCodes: TVariableSelections | undefined } = {
pxGraphData: {
tableReference: { name: "table.px", hierarchy: ["foo", "bar"] },
data: [
18.88,
0.00,
15.38,
-15.38,
13.23
],
missingDataInfo: {},
dataNotes: {},
metaData: [
{
code: "Vuosineljännes",
name: {
fi: "Vuosineljännes",
sv: "Kvartal",
en: "Quarter"
},
note: null,
type: EVariableType.Time,
values: [
{
code: "2022Q4",
name: {
fi: "2022Q4",
sv: "2022Q4",
en: "2022Q4"
},
note: null,
isSum: false,
contentComponent: null
}
]
},
{
code: "Huoneluku",
name: {
fi: "Huoneluku",
sv: "Antal rum",
en: "Number of rooms"
},
note: null,
type: EVariableType.Ordinal,
values: [
{
code: "00",
name: {
fi: "Yhteensä",
sv: "Totalt",
en: "Total"
},
note: null,
isSum: true,
contentComponent: null
}
]
},
{
code: "Rahoitusmuoto",
name: {
fi: "Rahoitusmuoto",
sv: "Finansieringssätt",
en: "Type of funding"
},
note: null,
type: EVariableType.OtherClassificatory,
values: [
{
code: "2",
name: {
fi: "Yhteensä",
sv: "Totalt",
en: "Total"
},
note: null,
isSum: true,
contentComponent: null
}
]
},
{
code: "Tiedot",
name: {
fi: "Tiedot",
sv: "Uppgifter",
en: "Information"
},
note: null,
type: EVariableType.Content,
values: [
{
code: "keskivuokra",
name: {
fi: "Neliövuokra (eur/m2)",
sv: "Kvadratmeterspris (eur/m2)",
en: "Rents per square meter (eur/m2)"
},
note: null,
isSum: false,
contentComponent: {
unit: {
fi: "eur / m2",
sv: "eur / m2",
en: "eur / m2"
},
source: {
fi: "PxVisualizer-fi",
sv: "PxVisualizer-sv",
en: "PxVisualizer-en"
},
numberOfDecimals: 2,
lastUpdated: "2023-01-19T06:00:00Z"
}
}
]
},
{
code: "Alue",
name: {
fi: "Alue",
sv: "Område",
en: "Region"
},
note: null,
type: EVariableType.Geological,
values: [
{
code: "091",
name: {
fi: "Helsinki",
sv: "Helsingfors",
en: "Helsinki"
},
note: null,
isSum: false,
contentComponent: null
},
{
code: "853",
name: {
fi: "Turku",
sv: "Åbo",
en: "Turku"
},
note: null,
isSum: false,
contentComponent: null
},
{
code: "837",
name: {
fi: "Tampere",
sv: "Tammerfors",
en: "Tampere"
},
note: null,
isSum: false,
contentComponent: null
},
{
code: "179",
name: {
fi: "Jyväskylä",
sv: "Jyväskylä",
en: "Jyväskylä"
},
note: null,
isSum: false,
contentComponent: null
},
{
code: "564",
name: {
fi: "Oulu",
sv: "Uleåborg",
en: "Oulu"
},
note: null,
isSum: false,
contentComponent: null
}
]
}
],
selectableVariableCodes: [],
rowVariableCodes: [],
columnVariableCodes: [
"Alue"
],
header: {
fi: "Neliövuokra (eur/m2) 2022Q4 muuttujana Alue",
sv: "Kvadratmeterspris (eur/m2) 2022Q4 efter Område",
en: "Rents per square meter (eur/m2) 2022Q4 by Region"
},
visualizationSettings: {
sorting: "ascending",
timeVariableIntervals: ETimeVariableInterval.Quarter,
visualizationType: EVisualizationType.HorizontalBarChart,
defaultSelectableVariableCodes: null
}
},
selectedVariableCodes: undefined
}


2 changes: 1 addition & 1 deletion src/stories/fixtures/verticalBarChart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -952,7 +952,7 @@ export const VERTICAL_BAR_CHART_WITH_NEGATIVE_VALUES: {
-0.4,
-1.0,
1.4,
1.8,
0,
1.2,
2.5,
4.5
Expand Down
Loading