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 | 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 { SlopeChart } from "./SlopeChart"
import {
SampleColumnSlugs,
SynthesizeGDPTable,
} from "../../coreTable/OwidTableSynthesizers"
import { BlankOwidTable } from "../../coreTable/OwidTable"
export default {
title: "SlopeChart",
component: SlopeChart,
}
const table = SynthesizeGDPTable({ entityCount: 10 })
export const Default = () => {
return (
<svg width={600} height={600}>
<SlopeChart manager={{ table }} />
</svg>
)
}
export const WithColorColumn = () => {
return (
<svg width={600} height={600}>
<SlopeChart
manager={{
table,
colorColumnSlug: SampleColumnSlugs.Population,
yColumnSlug: SampleColumnSlugs.GDP,
}}
/>
</svg>
)
}
export const BlankSlopeChart = () => {
return (
<svg width={600} height={600}>
<SlopeChart
manager={{
table: BlankOwidTable(),
}}
/>
</svg>
)
}
|