Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import * as React from "react"
import { FacetChart } from "./FacetChart"
import {
SampleColumnSlugs,
SynthesizeFruitTable,
SynthesizeGDPTable,
} from "../../coreTable/OwidTableSynthesizers"
import { Bounds } from "../../clientUtils/Bounds"
import { ChartTypeName, FacetStrategy } from "../core/GrapherConstants"
import { Meta } from "@storybook/react"
import { ChartManager } from "../chart/ChartManager"
// See https://storybook.js.org/docs/react/essentials/controls for Control Types
const CSF: Meta = {
title: "FacetChart",
component: FacetChart,
}
export default CSF
const bounds = new Bounds(0, 0, 1000, 500)
export const OneMetricOneCountryPerChart = (): JSX.Element => {
const table = SynthesizeGDPTable({
entityCount: 4,
})
const manager: ChartManager = {
table,
selection: table.availableEntityNames,
yColumnSlug: SampleColumnSlugs.GDP,
xColumnSlug: SampleColumnSlugs.Population,
}
return (
<svg width={bounds.width} height={bounds.height}>
<FacetChart
bounds={bounds}
chartTypeName={ChartTypeName.LineChart}
manager={manager}
/>
</svg>
)
}
export const MultipleMetricsOneCountryPerChart = (): JSX.Element => {
const table = SynthesizeFruitTable({
entityCount: 4,
})
return (
<svg width={bounds.width} height={bounds.height}>
<FacetChart
bounds={bounds}
chartTypeName={ChartTypeName.LineChart}
manager={{
selection: table.availableEntityNames,
table,
}}
/>
</svg>
)
}
export const OneChartPerMetric = (): JSX.Element => {
const table = SynthesizeGDPTable({
entityCount: 2,
})
return (
<svg width={bounds.width} height={bounds.height}>
<FacetChart
bounds={bounds}
chartTypeName={ChartTypeName.LineChart}
manager={{
facetStrategy: FacetStrategy.metric,
yColumnSlugs: table.numericColumnSlugs,
selection: table.availableEntityNames,
table,
}}
/>
</svg>
)
}
|