@seasketch/geoprocessing
Version:
Geoprocessing and reporting framework for SeaSketch 2.0
62 lines • 2.54 kB
JavaScript
import React from "react";
import { HorizontalStackedBar } from "./HorizontalStackedBar.js";
import { ReportDecorator, CardDecorator } from "../storybook/index.js";
import { VerticalSpacer } from "../VerticalSpacer.js";
import { valueFormatter } from "../../helpers/valueFormatter.js";
export default {
component: HorizontalStackedBar,
title: "Components/HorizontalStackedBar",
decorators: [CardDecorator, ReportDecorator],
};
const rows1 = [
[
[2, 10],
[5, 13, 4],
],
];
const rows2 = [[[12]]];
const rows3 = [
[
[2, 10],
[5, 13, 4],
],
[
[2, 12, 5],
[15, 17],
],
];
const rowConfigs1 = [
{
title: "Network 1",
},
];
const rowConfigs2 = [
{
title: "Network 2",
},
];
const rowConfigs3 = [
{
title: "Network 2",
},
{
title: "Network 3",
},
];
const blockGroupNames = ["Fully Protected Area", "Highly Protected Area"];
const blockGroupStyles = [
{ backgroundColor: "#64c2a6" },
{ backgroundColor: "#aadea7" },
{ backgroundColor: "gray" },
];
export const singleBar = () => (React.createElement(React.Fragment, null,
React.createElement(HorizontalStackedBar, { rows: rows1, max: 100, target: 30, rowConfigs: rowConfigs1, blockGroupNames: blockGroupNames, blockGroupStyles: blockGroupStyles }),
React.createElement(VerticalSpacer, null),
React.createElement(HorizontalStackedBar, { rows: rows2, max: 100, target: 15, rowConfigs: rowConfigs2, blockGroupNames: blockGroupNames, blockGroupStyles: blockGroupStyles })));
export const multipleBar = () => (React.createElement(React.Fragment, null,
React.createElement(HorizontalStackedBar, { rows: rows3, max: 100, target: 30, rowConfigs: rowConfigs3, blockGroupNames: blockGroupNames, blockGroupStyles: blockGroupStyles })));
export const targetValueFormatter = () => (React.createElement(React.Fragment, null,
React.createElement(HorizontalStackedBar, { rows: rows1, max: 100, target: 30, rowConfigs: rowConfigs1, blockGroupNames: blockGroupNames, blockGroupStyles: blockGroupStyles, targetValueFormatter: () => `Target - ${valueFormatter(30 / 100, "percent0dig")}` })));
export const targetOnBottom = () => (React.createElement(React.Fragment, null,
React.createElement(HorizontalStackedBar, { rows: rows1, max: 100, target: 30, rowConfigs: rowConfigs1, blockGroupNames: blockGroupNames, blockGroupStyles: blockGroupStyles, targetLabelPosition: "bottom" })));
//# sourceMappingURL=HorizontalStackedBar.stories.js.map