🎉 (slope) support facetting

owid · Dec 5, 2024 · 1736d95 · 1736d95
1 parent c2578d0
commit 1736d95
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 63 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/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -881,7 +881,7 @@ export class LineChart
 
         // only pass props that are required to calculate
         // the width to avoid circular dependencies
-        return LineLegend.width({
+        return LineLegend.stableWidth({
             labelSeries: this.lineLegendSeries,
             maxWidth: this.maxLineLegendWidth,
             fontSize: this.fontSize,

diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -338,11 +338,18 @@ export class LineLegend extends React.Component<LineLegendProps> {
      * This is partly due to a circular dependency (in line and stacked area
      * charts), partly to avoid jumpy layout changes (slope charts).
      */
-    static width(props: LineLegendProps): number {
+    static stableWidth(props: LineLegendProps): number {
         const test = new LineLegend(props)
         return test.maxLabelWidth + DEFAULT_CONNECTOR_LINE_WIDTH + MARKER_MARGIN
     }
 
+    static width(props: LineLegendProps): number {
+        const test = new LineLegend(props)
+        return test.needsLines
+            ? test.maxLabelWidth + DEFAULT_CONNECTOR_LINE_WIDTH + MARKER_MARGIN
+            : test.maxLabelWidth + MARKER_MARGIN
+    }
+
     static fontSize(props: Partial<LineLegendProps>): number {
         const test = new LineLegend(props as LineLegendProps)
         return test.fontSize