🎉 (slope) support facetting / TAS-734 (#4247)

Adds facetting support for slope charts. If there are many facets it could be nice to declutter them, but I don't have time for that now.
owid · Dec 11, 2024 · b59dbca · b59dbca
1 parent e87de50
commit b59dbca
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 65 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
@@ -355,6 +355,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
@@ -449,6 +454,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
     }

diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
@@ -1144,10 +1144,16 @@ export class ScatterPlotChart
     // domains across the entire timeline
     private domainDefault(property: "x" | "y"): [number, number] {
         const scaleType = property === "x" ? this.xScaleType : this.yScaleType
-        return domainExtent(
-            this.pointsForAxisDomains.map((point) => point[property]),
-            scaleType,
-            this.manager.zoomToSelection && this.selectedPoints.length ? 1.1 : 1
+        const defaultDomain: [number, number] =
+            scaleType === ScaleType.log ? [1, 100] : [-1, 1]
+        return (
+            domainExtent(
+                this.pointsForAxisDomains.map((point) => point[property]),
+                scaleType,
+                this.manager.zoomToSelection && this.selectedPoints.length
+                    ? 1.1
+                    : 1
+            ) ?? defaultDomain
         )
     }