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 | 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 { DualAxis } from "../axis/Axis" import { AxisConfig } from "../axis/AxisConfig" import * as React from "react" import { LineLegend, LineLegendManager } from "./LineLegend" export default { title: "LineLegend", component: LineLegend, } const verticalAxis = new AxisConfig({ min: 0, max: 100, }).toVerticalAxis() const horizontalAxis = new AxisConfig({ min: 0, max: 100, }).toHorizontalAxis() const dualAxis = new DualAxis({ verticalAxis, horizontalAxis, }) const collidingNumber = 50 const manager: LineLegendManager = { labelSeries: [ { seriesName: "Canada", label: "Canada", color: "red", yValue: collidingNumber, annotation: "A country in North America", }, { seriesName: "USA", label: "USA", color: "blue", yValue: collidingNumber, annotation: "In between", }, { seriesName: "Mexico", label: "Mexico", color: "green", yValue: 20, annotation: "Below", }, ], lineLegendX: 200, focusedSeriesNames: [], yAxis: dualAxis.verticalAxis, } export const TestCollisionDetection = (): JSX.Element => { return ( <svg width={600} height={400}> <LineLegend manager={manager} /> </svg> ) } |