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 | 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 1x | import * as React from "react"
import { DiscreteBarChart } from "./DiscreteBarChart"
import {
SampleColumnSlugs,
SynthesizeFruitTable,
SynthesizeGDPTable,
} from "../../coreTable/OwidTableSynthesizers"
import { DiscreteBarChartManager } from "./DiscreteBarChartConstants"
export default {
title: "DiscreteBarChart",
component: DiscreteBarChart,
}
export const EntitiesAsSeries = (): JSX.Element => {
const table = SynthesizeGDPTable({
timeRange: [2009, 2010],
entityCount: 10,
})
const manager: DiscreteBarChartManager = {
table,
selection: table.availableEntityNames,
yColumnSlug: SampleColumnSlugs.Population,
}
return (
<svg width={600} height={600}>
<DiscreteBarChart manager={manager} />
</svg>
)
}
export const EntitiesAsSeriesWithTolerance = (): JSX.Element => {
const table = SynthesizeGDPTable({
timeRange: [2009, 2011],
entityCount: 10,
})
.rowFilter(
(row): boolean => row.year === 2010 || Math.random() > 0.5,
"Remove 50% of 2009 rows"
)
.interpolateColumnWithTolerance(SampleColumnSlugs.Population, 1)
.filterByTargetTimes([2009])
const manager: DiscreteBarChartManager = {
table,
// Pass transformed table to avoid applying tolerance again in transformTable()
transformedTable: table,
selection: table.availableEntityNames,
yColumnSlug: SampleColumnSlugs.Population,
endTime: 2009,
}
return (
<svg width={600} height={600}>
<DiscreteBarChart manager={manager} />
</svg>
)
}
export const ColumnsAsSeries = (): JSX.Element => {
const table = SynthesizeFruitTable({ entityCount: 1 })
const manager: DiscreteBarChartManager = {
table,
selection: table.availableEntityNames,
}
return (
<svg width={600} height={600}>
<DiscreteBarChart manager={manager} />
</svg>
)
}
|