🎉 (slope) support facetting

owid · Dec 6, 2024 · 22d79ba · 22d79ba
1 parent 1afb4ee
commit 22d79ba
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 59 deletions.
diff --git a/packages/@ourworldindata/grapher/src/chart/ChartManager.ts b/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
@@ -68,6 +68,7 @@ export interface ChartManager {
 
     hidePoints?: boolean // for line options
     startHandleTimeBound?: TimeBound // for relative-to-first-year line chart
+    hideNoDataSection?: boolean // for slope charts
 
     // we need endTime so DiscreteBarCharts and StackedDiscreteBarCharts can
     // know what date the timeline is set to. and let's pass startTime in, too.
@@ -78,7 +79,7 @@ export interface ChartManager {
     seriesStrategy?: SeriesStrategy
 
     sortConfig?: SortConfig
-    showNoDataArea?: boolean
+    showNoDataArea?: boolean // No data area in Marimekko charts
 
     externalLegendHoverBin?: ColorScaleBin | undefined
     disableIntroAnimation?: boolean

diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
@@ -195,6 +195,7 @@ export class SettingsMenu extends React.Component<{
             StackedBar,
             StackedDiscreteBar,
             LineChart,
+            SlopeChart,
         ].includes(this.chartType as any)
 
         const hasProjection = filledDimensions.some(

diff --git a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
@@ -295,7 +295,9 @@ export class FacetChart
         return series.map((series, index) => {
             const { bounds } = gridBoundsArr[index]
             const showLegend = !this.hideFacetLegends
+
             const hidePoints = true
+            const hideNoDataSection = true
 
             // NOTE: The order of overrides is important!
             // We need to preserve most config coming in.
@@ -319,6 +321,7 @@ export class FacetChart
                 endTime,
                 missingDataStrategy,
                 backgroundColor,
+                hideNoDataSection,
                 ...series.manager,
                 xAxisConfig: {
                     ...globalXAxisConfig,
@@ -756,7 +759,8 @@ export class FacetChart
         )
         if (this.facetStrategy === FacetStrategy.metric && newBins.length <= 1)
             return []
-        return newBins
+        const sortedBins = sortBy(newBins, (bin) => bin.label)
+        return sortedBins
     }
 
     @observable.ref private legendHoverBin: ColorScaleBin | undefined =

diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -359,6 +359,11 @@ export class LineLegend extends React.Component<LineLegendProps> {
         return test.stableWidth
     }
 
+    static width(props: LineLegendProps): number {
+        const test = new LineLegend(props)
+        return test.width
+    }
+
     static fontSize(props: Partial<LineLegendProps>): number {
         const test = new LineLegend(props as LineLegendProps)
         return test.fontSize
@@ -450,6 +455,12 @@ export class LineLegend extends React.Component<LineLegendProps> {
         return this.maxLabelWidth + DEFAULT_CONNECTOR_LINE_WIDTH + MARKER_MARGIN
     }
 
+    @computed get width(): number {
+        return this.needsLines
+            ? this.stableWidth
+            : this.maxLabelWidth + MARKER_MARGIN
+    }
+
     @computed get onMouseOver(): any {
         return this.props.onMouseOver ?? noop
     }