@buildcanada/charts 0.1.0

package/src/grapher/chart/ChartTypeMap.tsx

@@ -0,0 +1,158 @@
+import { match, P } from "ts-pattern"
+import {
+    GRAPHER_CHART_TYPES,
+    GRAPHER_MAP_TYPE,
+    GrapherChartOrMapType,
+    GrapherVariant,
+} from "../../types/index.js"
+import { ChartInterface, ChartState } from "./ChartInterface"
+import { ChartManager } from "./ChartManager"
+import { ComponentClass, Component } from "react"
+import { Bounds } from "../../utils/index.js"
+
+import { LineChartState } from "../lineCharts/LineChartState.js"
+import { SlopeChartState } from "../slopeCharts/SlopeChartState"
+import { DiscreteBarChartState } from "../barCharts/DiscreteBarChartState.js"
+import { StackedAreaChartState } from "../stackedCharts/StackedAreaChartState.js"
+import { StackedBarChartState } from "../stackedCharts/StackedBarChartState.js"
+import { StackedDiscreteBarChartState } from "../stackedCharts/StackedDiscreteBarChartState"
+import { ScatterPlotChartState } from "../scatterCharts/ScatterPlotChartState"
+import { MarimekkoChartState } from "../stackedCharts/MarimekkoChartState"
+import { MapChartState } from "../mapCharts/MapChartState"
+
+import { LineChart } from "../lineCharts/LineChart"
+import { SlopeChart } from "../slopeCharts/SlopeChart.js"
+import { DiscreteBarChart } from "../barCharts/DiscreteBarChart.js"
+import { StackedAreaChart } from "../stackedCharts/StackedAreaChart"
+import { StackedBarChart } from "../stackedCharts/StackedBarChart"
+import { StackedDiscreteBarChart } from "../stackedCharts/StackedDiscreteBarChart"
+import { ScatterPlotChart } from "../scatterCharts/ScatterPlotChart"
+import { MarimekkoChart } from "../stackedCharts/MarimekkoChart"
+import { MapChart } from "../mapCharts/MapChart"
+
+import { LineChartThumbnail } from "../lineCharts/LineChartThumbnail"
+import { SlopeChartThumbnail } from "../slopeCharts/SlopeChartThumbnail"
+import { DiscreteBarChartThumbnail } from "../barCharts/DiscreteBarChartThumbnail.js"
+import { StackedAreaChartThumbnail } from "../stackedCharts/StackedAreaChartThumbnail"
+import { StackedBarChartThumbnail } from "../stackedCharts/StackedBarChartThumbnail"
+import { StackedDiscreteBarChartThumbnail } from "../stackedCharts/StackedDiscreteBarChartThumbnail"
+import { ScatterPlotChartThumbnail } from "../scatterCharts/ScatterPlotChartThumbnail"
+import { MarimekkoChartThumbnail } from "../stackedCharts/MarimekkoChartThumbnail"
+import { MapChartThumbnail } from "../mapCharts/MapChartThumbnail"
+
+export interface ChartComponentProps<TState extends ChartState = ChartState> {
+    chartState: TState
+    bounds?: Bounds
+}
+
+interface ChartComponentClass<T extends ChartState = ChartState>
+    extends ComponentClass<ChartComponentProps<T>> {
+    new (props: ChartComponentProps<T>): Component & ChartInterface
+}
+
+type ChartFactoryProps = {
+    manager: ChartManager
+    chartType: GrapherChartOrMapType
+    chartState?: ChartState
+    variant?: GrapherVariant
+} & Omit<ChartComponentProps, "chartState">
+
+const ChartComponentClassMap = new Map<
+    GrapherChartOrMapType,
+    ChartComponentClass<any>
+>([
+    [GRAPHER_CHART_TYPES.LineChart, LineChart],
+    [GRAPHER_CHART_TYPES.SlopeChart, SlopeChart],
+    [GRAPHER_CHART_TYPES.DiscreteBar, DiscreteBarChart],
+    [GRAPHER_CHART_TYPES.StackedArea, StackedAreaChart],
+    [GRAPHER_CHART_TYPES.StackedBar, StackedBarChart],
+    [GRAPHER_CHART_TYPES.StackedDiscreteBar, StackedDiscreteBarChart],
+    [GRAPHER_CHART_TYPES.ScatterPlot, ScatterPlotChart],
+    [GRAPHER_CHART_TYPES.Marimekko, MarimekkoChart],
+    [GRAPHER_MAP_TYPE, MapChart],
+])
+
+const ChartThumbnailClassMap = new Map<
+    GrapherChartOrMapType,
+    ChartComponentClass<any>
+>([
+    [GRAPHER_CHART_TYPES.LineChart, LineChartThumbnail],
+    [GRAPHER_CHART_TYPES.SlopeChart, SlopeChartThumbnail],
+    [GRAPHER_CHART_TYPES.DiscreteBar, DiscreteBarChartThumbnail],
+    [GRAPHER_CHART_TYPES.StackedArea, StackedAreaChartThumbnail],
+    [GRAPHER_CHART_TYPES.StackedBar, StackedBarChartThumbnail],
+    [GRAPHER_CHART_TYPES.StackedDiscreteBar, StackedDiscreteBarChartThumbnail],
+    [GRAPHER_CHART_TYPES.ScatterPlot, ScatterPlotChartThumbnail],
+    [GRAPHER_CHART_TYPES.Marimekko, MarimekkoChartThumbnail],
+    [GRAPHER_MAP_TYPE, MapChartThumbnail],
+])
+
+const ChartStateMap = new Map<
+    GrapherChartOrMapType,
+    new (args: { manager: ChartManager }) => ChartState
+>([
+    [GRAPHER_CHART_TYPES.LineChart, LineChartState],
+    [GRAPHER_CHART_TYPES.SlopeChart, SlopeChartState],
+    [GRAPHER_CHART_TYPES.DiscreteBar, DiscreteBarChartState],
+    [GRAPHER_CHART_TYPES.StackedArea, StackedAreaChartState],
+    [GRAPHER_CHART_TYPES.StackedBar, StackedBarChartState],
+    [GRAPHER_CHART_TYPES.StackedDiscreteBar, StackedDiscreteBarChartState],
+    [GRAPHER_CHART_TYPES.ScatterPlot, ScatterPlotChartState],
+    [GRAPHER_CHART_TYPES.Marimekko, MarimekkoChartState],
+    [GRAPHER_MAP_TYPE, MapChartState],
+])
+
+export function makeChartState(
+    chartType: GrapherChartOrMapType,
+    manager: ChartManager
+): ChartState {
+    const StateClass = ChartStateMap.get(chartType) ?? LineChartState
+    return new StateClass({ manager })
+}
+
+function getChartComponentClass(
+    chartType: GrapherChartOrMapType,
+    variant = GrapherVariant.Default
+): ChartComponentClass {
+    const { ClassMap, DefaultChartClass } = match(variant)
+        .with(
+            P.union(GrapherVariant.Default, GrapherVariant.Uncaptioned),
+            () => ({
+                ClassMap: ChartComponentClassMap,
+                DefaultChartClass: LineChart,
+            })
+        )
+        .with(GrapherVariant.Thumbnail, () => ({
+            ClassMap: ChartThumbnailClassMap,
+            DefaultChartClass: LineChartThumbnail,
+        }))
+        .exhaustive()
+
+    const ChartClass = ClassMap.get(chartType) ?? DefaultChartClass
+
+    return ChartClass as ChartComponentClass
+}
+
+export const ChartComponent = ({
+    manager,
+    chartType,
+    chartState,
+    variant = GrapherVariant.Default,
+    ...componentProps
+}: ChartFactoryProps): React.ReactElement => {
+    const validChartState = chartState ?? makeChartState(chartType, manager)
+    const ChartClass = getChartComponentClass(chartType, variant)
+    return <ChartClass {...componentProps} chartState={validChartState} />
+}
+
+export const makeChartInstance = ({
+    manager,
+    chartType,
+    chartState,
+    variant = GrapherVariant.Default,
+    ...componentProps
+}: ChartFactoryProps): ChartInterface => {
+    const validChartState = chartState ?? makeChartState(chartType, manager)
+    const ChartClass = getChartComponentClass(chartType, variant)
+    return new ChartClass({ ...componentProps, chartState: validChartState })
+}

package/src/grapher/chart/ChartTypeSwitcher.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import {
+    ALL_GRAPHER_CHART_TYPES,
+    GrapherChartType,
+} from "../../types/index.js"
+
+// Just a utility for testing
+export class ChartTypeSwitcher extends React.Component<{
+    onChange: (chartType: GrapherChartType) => void
+}> {
+    override render(): React.ReactElement {
+        return (
+            <select
+                onChange={(event): void =>
+                    this.props.onChange(event.target.value as any)
+                }
+            >
+                {ALL_GRAPHER_CHART_TYPES.map((value) => (
+                    <option key={value} value={value}>
+                        {value}
+                    </option>
+                ))}
+            </select>
+        )
+    }
+}

package/src/grapher/chart/ChartUtils.tsx

@@ -0,0 +1,364 @@
+import * as React from "react"
+import {
+    Box,
+    excludeUndefined,
+    getRegionByName,
+    Url,
+} from "../../utils/index.js"
+import {
+    SeriesStrategy,
+    EntityName,
+    SeriesName,
+    ColumnSlug,
+    GrapherTabName,
+    GRAPHER_TAB_NAMES,
+    ProjectionColumnInfo,
+    CoreValueType,
+    PrimitiveType,
+    ColumnTypeNames,
+    Time,
+} from "../../types/index.js"
+import { LineChartSeries } from "../lineCharts/LineChartConstants"
+import { SelectionArray } from "../selection/SelectionArray"
+import { ChartManager } from "./ChartManager"
+import {
+    GRAPHER_SIDE_PANEL_CLASS,
+    GRAPHER_TIMELINE_CLASS,
+    GRAPHER_SETTINGS_CLASS,
+    SVG_STYLE_PROPS,
+    BASE_FONT_SIZE,
+    Patterns,
+    GRAPHER_IMAGE_WIDTH_1X,
+    GRAPHER_IMAGE_WIDTH_2X,
+} from "../core/GrapherConstants"
+import { ChartSeries } from "./ChartInterface"
+import {
+    ErrorValueTypes,
+    isNotErrorValueOrEmptyCell,
+    OwidTable,
+} from "../../core-table/index.js"
+import { GRAPHER_BACKGROUND_DEFAULT } from "../color/ColorConstants"
+import { InteractionState } from "../interaction/InteractionState"
+
+export const autoDetectYColumnSlugs = (manager: ChartManager): string[] => {
+    if (manager.yColumnSlugs && manager.yColumnSlugs.length)
+        return manager.yColumnSlugs
+    if (manager.yColumnSlug) return [manager.yColumnSlug]
+    return manager.table.numericColumnSlugs
+}
+
+export const getDefaultFailMessage = (manager: ChartManager): string => {
+    if (manager.table.rootTable.isBlank) return `No table loaded yet`
+    if (manager.table.rootTable.entityNameColumn.isMissing)
+        return `Table is missing an EntityName column`
+    if (manager.table.rootTable.timeColumn.isMissing)
+        return `Table is missing a Time column`
+    const yColumnSlugs = autoDetectYColumnSlugs(manager)
+    if (!yColumnSlugs.length) return "Missing Y axis column"
+    const selection = makeSelectionArray(manager.selection)
+    if (!selection.hasSelection) return `No ${manager.entityType} selected`
+    return ""
+}
+
+export const getSeriesKey = (
+    series: LineChartSeries,
+    index: number
+): string => {
+    return `${series.seriesName}-${series.color}-${
+        series.isProjection ? "projection" : ""
+    }-${index}`
+}
+
+export const autoDetectSeriesStrategy = (
+    manager: ChartManager,
+    handleProjections: boolean = false
+): SeriesStrategy => {
+    if (manager.seriesStrategy) return manager.seriesStrategy
+
+    let columnThreshold: number = 1
+
+    if (handleProjections && manager.transformedTable) {
+        const yColumnSlugs = autoDetectYColumnSlugs(manager)
+        const yColumns = yColumnSlugs.map((slug) =>
+            manager.transformedTable!.get(slug)
+        )
+        const hasNormalAndProjectedSeries =
+            yColumns.some((col) => col.isProjection) &&
+            yColumns.some((col) => !col.isProjection)
+        if (hasNormalAndProjectedSeries) {
+            columnThreshold = 2
+        }
+    }
+
+    return autoDetectYColumnSlugs(manager).length > columnThreshold
+        ? SeriesStrategy.column
+        : SeriesStrategy.entity
+}
+
+export interface ClipPath {
+    id: string
+    element: React.ReactElement
+}
+
+export const makeClipPath = (props: {
+    name?: string
+    renderUid: number
+    box: Box
+}): {
+    id: string
+    element: React.ReactElement
+} => {
+    const name = props.name ?? "boundsClip"
+    const id = `${name}-${props.renderUid}`
+    return {
+        id: `url(#${id})`,
+        element: (
+            <defs>
+                <clipPath id={id}>
+                    <rect {...props.box}></rect>
+                </clipPath>
+            </defs>
+        ),
+    }
+}
+
+export const makeSelectionArray = (
+    selection?: SelectionArray | EntityName[]
+): SelectionArray =>
+    selection instanceof SelectionArray
+        ? selection
+        : new SelectionArray(selection ?? [])
+
+export function isElementInteractive(element: HTMLElement): boolean {
+    const interactiveTags = ["a", "button", "input"]
+    const interactiveClassNames = [
+        GRAPHER_TIMELINE_CLASS,
+        GRAPHER_SIDE_PANEL_CLASS,
+        GRAPHER_SETTINGS_CLASS,
+    ].map((className) => `.${className}`)
+
+    const selector = [...interactiveTags, ...interactiveClassNames].join(", ")
+
+    // check if the target is an interactive element or contained within one
+    return element.closest(selector) !== null
+}
+
+export function getShortNameForEntity(entityName: string): string | undefined {
+    const region = getRegionByName(entityName)
+    return region?.shortName
+}
+
+export function isTargetOutsideElement(
+    target: EventTarget,
+    element: Node
+): boolean {
+    const targetNode = target as Node
+    return (
+        !element.contains(targetNode) &&
+        // check that the target is still mounted to the document (we also get
+        // click events on nodes that have since been removed by React)
+        document.contains(targetNode)
+    )
+}
+
+export function getHoverStateForSeries(
+    series: ChartSeries,
+    props: {
+        hoveredSeriesNames: SeriesName[]
+        // usually the hover mode is active when there is
+        // at least one hovered element. But sometimes the hover
+        // mode might be active although there are no hovered elements.
+        // For example, when the facet legend is hovered but a particular
+        // chart doesn't plot the hovered element.
+        isHoverModeActive?: boolean
+    }
+): InteractionState {
+    const hoveredSeriesNames = props.hoveredSeriesNames
+    const isHoverModeActive =
+        props.isHoverModeActive ?? hoveredSeriesNames.length > 0
+
+    const isActive = hoveredSeriesNames.includes(series.seriesName)
+
+    return new InteractionState(isActive, isHoverModeActive)
+}
+
+/** Useful for sorting series by their interaction state */
+export function byHoverThenFocusState(series: {
+    hover: InteractionState
+    focus: InteractionState
+}): number {
+    // active series rank highest and hover trumps focus
+    if (series.hover.active) return 4
+    if (series.focus.active) return 3
+
+    // series in their default state rank in the middle
+    if (!series.hover.background && !series.focus.background) return 2
+
+    // background series rank lowest
+    return 1
+}
+
+export function makeAxisLabel({
+    label,
+    displayUnit,
+}: {
+    label: string
+    displayUnit?: string
+}): {
+    mainLabel: string // shown in bold
+    unit?: string // shown in normal weight, usually in parens
+} {
+    // No unit to display
+    if (!displayUnit) return { mainLabel: label }
+
+    // Extract text in parens at the end of the label,
+    // e.g. "Population (millions)" is split into "Population " and "(millions)"
+    const [
+        _fullMatch,
+        untrimmedMainLabelText = undefined,
+        labelTextInParens = undefined,
+    ] = label.trim().match(/^(.*?)(\([^()]*\))?$/s) ?? []
+    const mainLabelText = untrimmedMainLabelText?.trim() ?? ""
+
+    // Don't show unit twice if it's contained in the label
+    const displayLabel =
+        labelTextInParens === `(${displayUnit})` ? mainLabelText : label
+
+    return { mainLabel: displayLabel, unit: displayUnit }
+}
+
+/**
+ * Given a URL for a CF function grapher thumbnail, generate a srcSet for the image at different widths
+ * @param defaultSrc - `https://ourworldindata.org/grapher/thumbnail/life-expectancy.png?tab=chart`
+ * @returns srcSet - `https://ourworldindata.org/grapher/thumbnail/life-expectancy.png?tab=chart&imWidth=850 850w, https://ourworldindata.org/grapher/thumbnail/life-expectancy.png?tab=chart&imWidth=1700 1700w`
+ */
+export function generateGrapherImageSrcSet(defaultSrc: string): string {
+    const url = Url.fromURL(defaultSrc)
+    const existingQueryParams = url.queryParams
+    const imWidths = [
+        GRAPHER_IMAGE_WIDTH_1X.toString(),
+        GRAPHER_IMAGE_WIDTH_2X.toString(),
+    ]
+    const srcSet = imWidths
+        .map((imWidth) => {
+            return `${url.setQueryParams({ ...existingQueryParams, imWidth }).fullUrl} ${imWidth}w`
+        })
+        .join(", ")
+
+    return srcSet
+}
+
+export const isChartTab = (tab: GrapherTabName): boolean =>
+    tab !== GRAPHER_TAB_NAMES.Table && tab !== GRAPHER_TAB_NAMES.WorldMap
+
+export const isMapTab = (tab: GrapherTabName): boolean =>
+    tab === GRAPHER_TAB_NAMES.WorldMap
+
+export function combineHistoricalAndProjectionColumns(
+    table: OwidTable,
+    info: ProjectionColumnInfo,
+    options?: { shouldAddIsProjectionColumn: boolean }
+): OwidTable {
+    const {
+        historicalSlug,
+        projectedSlug,
+        combinedSlug,
+        slugForIsProjectionColumn,
+    } = info
+
+    const transformFn = (
+        row: Record<ColumnSlug, { value: CoreValueType; time: Time }>,
+        time: Time
+    ): { isProjection: boolean; value: PrimitiveType } | undefined => {
+        // It's possible to have both a historical and a projected value
+        // for a given year. In that case, we prefer the historical value.
+
+        const historical = row[historicalSlug]
+        const projected = row[projectedSlug]
+
+        const historicalTimeDiff = Math.abs(historical.time - time)
+        const projectionTimeDiff = Math.abs(projected.time - time)
+
+        if (
+            isNotErrorValueOrEmptyCell(historical.value) &&
+            // If tolerance was applied to the historical column, we need to
+            // make sure the interpolated historical value doesn't get picked
+            // over the actual projected value
+            historicalTimeDiff <= projectionTimeDiff
+        )
+            return { value: historical.value, isProjection: false }
+
+        if (isNotErrorValueOrEmptyCell(projected.value)) {
+            return { value: projected.value, isProjection: true }
+        }
+
+        return undefined
+    }
+
+    // Combine the historical and projected values into a single column
+    table = table.combineColumns(
+        [projectedSlug, historicalSlug],
+        { ...table.get(projectedSlug).def, slug: combinedSlug },
+        (row, time) =>
+            transformFn(row, time)?.value ??
+            ErrorValueTypes.MissingValuePlaceholder
+    )
+
+    // Add a column indicating whether the value is a projection or not
+    if (options?.shouldAddIsProjectionColumn)
+        table = table.combineColumns(
+            [projectedSlug, historicalSlug],
+            {
+                slug: slugForIsProjectionColumn,
+                type: ColumnTypeNames.Boolean,
+            },
+            (row, time) =>
+                transformFn(row, time)?.isProjection ??
+                ErrorValueTypes.MissingValuePlaceholder
+        )
+
+    return table
+}
+
+export function NoDataPattern({
+    patternId = Patterns.noDataPattern,
+    scale = 1,
+}: {
+    patternId?: string
+    scale?: number
+}): React.ReactElement {
+    const patternTransforms = excludeUndefined([
+        `rotate(-45 2 2)`,
+        scale !== 1 ? `scale(${scale})` : undefined,
+    ])
+    return (
+        <pattern
+            id={patternId}
+            patternUnits="userSpaceOnUse"
+            width="4"
+            height="4"
+            patternTransform={patternTransforms.join(" ")}
+        >
+            <path d="M -1,2 l 6,0" stroke="#ccc" strokeWidth={0.7} />
+        </pattern>
+    )
+}
+
+export function getChartSvgProps({
+    fontSize,
+    backgroundColor,
+}: {
+    fontSize?: number
+    backgroundColor?: string
+}): React.SVGProps<SVGSVGElement> {
+    return {
+        xmlns: "http://www.w3.org/2000/svg",
+        version: "1.1",
+        style: {
+            ...SVG_STYLE_PROPS,
+            fontSize: fontSize ?? BASE_FONT_SIZE,
+            // Needs to be set here or else pngs will have a black background
+            backgroundColor: backgroundColor ?? GRAPHER_BACKGROUND_DEFAULT,
+        },
+    }
+}

package/src/grapher/chart/DimensionSlot.ts

@@ -0,0 +1,45 @@
+// todo: remove
+
+import { GrapherState } from "../core/GrapherState"
+import { computed, makeObservable } from "mobx"
+import { ChartDimension } from "./ChartDimension"
+import { DimensionProperty } from "../../utils/index.js"
+
+export class DimensionSlot {
+    private grapherState: GrapherState
+    property: DimensionProperty
+    constructor(grapher: GrapherState, property: DimensionProperty) {
+        makeObservable(this)
+        this.grapherState = grapher
+        this.property = property
+    }
+
+    @computed get name(): string {
+        const names = {
+            y: this.grapherState.isDiscreteBar ? "X axis" : "Y axis",
+            x: "X axis",
+            size: "Size",
+            color: "Color",
+            filter: "Filter",
+        }
+
+        return (names as any)[this.property] || ""
+    }
+
+    @computed get allowMultiple(): boolean {
+        return (
+            this.property === DimensionProperty.y &&
+            this.grapherState.supportsMultipleYColumns
+        )
+    }
+
+    @computed get isOptional(): boolean {
+        return this.allowMultiple
+    }
+
+    @computed get dimensions(): ChartDimension[] {
+        return this.grapherState.dimensions.filter(
+            (d) => d.property === this.property
+        )
+    }
+}

package/src/grapher/chart/StaticChartWrapper.tsx

@@ -0,0 +1,94 @@
+import React from "react"
+import { computed, makeObservable } from "mobx"
+import { observer } from "mobx-react"
+import { Bounds } from "../../utils/index.js"
+import { DEFAULT_GRAPHER_BOUNDS } from "../core/GrapherConstants.js"
+import { CaptionedChartManager } from "../captionedChart/CaptionedChart.js"
+import { GRAPHER_BACKGROUND_DEFAULT } from "../color/ColorConstants.js"
+import { getChartSvgProps, NoDataPattern } from "./ChartUtils.js"
+
+interface StaticChartWrapperProps {
+    manager: CaptionedChartManager
+    bounds?: Bounds
+    children: React.ReactNode
+}
+
+@observer
+export class StaticChartWrapper extends React.Component<StaticChartWrapperProps> {
+    constructor(props: StaticChartWrapperProps) {
+        super(props)
+        makeObservable(this)
+    }
+
+    @computed private get manager(): CaptionedChartManager {
+        return this.props.manager
+    }
+
+    @computed protected get bounds(): Bounds {
+        return (
+            this.props.bounds ??
+            this.manager.staticBounds ??
+            DEFAULT_GRAPHER_BOUNDS
+        )
+    }
+
+    @computed private get fonts(): React.ReactElement {
+        let origin = ""
+        try {
+            if (this.manager.bakedGrapherURL)
+                origin = new URL(this.manager.bakedGrapherURL).origin
+        } catch {
+            // ignore
+        }
+        const css = `@import url(${origin}/fonts.css)`
+        return (
+            <defs>
+                <style>{css}</style>
+            </defs>
+        )
+    }
+
+    @computed private get backgroundColor(): string {
+        return this.manager.backgroundColor ?? GRAPHER_BACKGROUND_DEFAULT
+    }
+
+    @computed private get noDataPattern(): React.ReactElement {
+        return (
+            <defs>
+                <NoDataPattern />
+            </defs>
+        )
+    }
+
+    override render(): React.ReactElement {
+        const { manager } = this
+
+        const bounds = this.manager.staticBoundsWithDetails ?? this.bounds
+        const width = bounds.width
+        const height = bounds.height
+
+        const includeFontsStyle = !manager.isExportingForWikimedia
+        const includeBackgroundRect = !!manager.isExportingForWikimedia
+
+        return (
+            <svg
+                {...getChartSvgProps(this.manager)}
+                width={width}
+                height={height}
+                viewBox={`0 0 ${width} ${height}`}
+            >
+                {includeFontsStyle && this.fonts}
+                {this.noDataPattern}
+                {includeBackgroundRect && (
+                    <rect
+                        className="background-fill"
+                        fill={this.backgroundColor}
+                        width={width}
+                        height={height}
+                    />
+                )}
+                {this.props.children}
+            </svg>
+        )
+    }
+}