@seasketch/geoprocessing
Version:
Geoprocessing and reporting framework for SeaSketch 2.0
445 lines • 18 kB
JavaScript
import React from "react";
import { ClassTable } from "./ClassTable.js";
import { defaultReportContext } from "../../context/index.js";
import { CardDecorator, createReportDecorator } from "../storybook/index.js";
import { createMetric } from "../../metrics/index.js";
import { longClassMetrics, simpleClassMetrics, simpleMetricGroup, simpleObjectives, categoricalClassMetrics, categoricalMultiObjective, categoricalSingleObjective, categoricalClassMetricsMixedTarget, categoricalMetricGroup, categoricalMetricGroupMixedTarget, NaNPercMetrics, } from "../../testing/fixtures/metrics.js";
import { valueFormatter } from "../../helpers/valueFormatter.js";
import Translator from "../i18n/TranslatorAsync.js";
export default {
component: ClassTable,
title: "Components/Table/ClassTable",
decorators: [CardDecorator, createReportDecorator(defaultReportContext)],
};
export const simple = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: simpleClassMetrics, metricGroup: simpleMetricGroup, objective: simpleObjectives, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
},
] })));
};
export const number1digit = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: simpleClassMetrics, metricGroup: simpleMetricGroup, objective: simpleObjectives, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: "number1dig",
},
] })));
};
export const number2digit = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: simpleClassMetrics, metricGroup: simpleMetricGroup, objective: simpleObjectives, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: "number2dig",
},
] })));
};
export const numberThousands = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: simpleClassMetrics.map((m) => ({
...m,
value: m.value * 10_000_000,
})), metricGroup: simpleMetricGroup, objective: simpleObjectives, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: "number1dig",
},
] })));
};
export const integer = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: simpleClassMetrics.map((m) => ({
...m,
value: m.value * 10,
})), metricGroup: simpleMetricGroup, objective: simpleObjectives, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: "integer",
},
] })));
};
export const percent = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: [
createMetric({
metricId: simpleMetricGroup.metricId,
classId: "Plains",
value: 0.123_45,
}),
], metricGroup: simpleMetricGroup, objective: simpleObjectives, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
columnLabel: "% Value",
},
] })));
};
export const percent1Digit = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: [
createMetric({
metricId: simpleMetricGroup.metricId,
classId: "Plains",
value: 0.123_45,
}),
], metricGroup: simpleMetricGroup, objective: simpleObjectives, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent1dig",
columnLabel: "% Value",
},
] })));
};
export const percent2Digit = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: [
createMetric({
metricId: simpleMetricGroup.metricId,
classId: "Plains",
value: 0.123_45,
}),
], metricGroup: simpleMetricGroup, objective: simpleObjectives, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent2dig",
columnLabel: "% Value",
},
] })));
};
export const percentThousands = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: [
createMetric({
metricId: simpleMetricGroup.metricId,
classId: "Plains",
value: 10_000.123_45,
}),
], metricGroup: simpleMetricGroup, objective: simpleObjectives, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent2dig",
columnLabel: "% Value",
},
] })));
};
export const simpleLayerToggle = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: simpleClassMetrics, metricGroup: simpleMetricGroup, objective: simpleObjectives, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
columnLabel: "% Value",
},
{
type: "layerToggle",
},
] })));
};
export const simpleGoal = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: simpleClassMetrics, metricGroup: simpleMetricGroup, objective: simpleObjectives, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
},
{
type: "metricGoal",
valueFormatter: "percent",
},
] })));
};
export const simpleBoth = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: simpleClassMetrics, metricGroup: simpleMetricGroup, objective: simpleObjectives, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
columnLabel: "% Value",
},
{
type: "metricGoal",
valueFormatter: "percent",
},
{
type: "layerToggle",
},
] })));
};
export const categoricalData = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: categoricalClassMetrics, metricGroup: categoricalMetricGroup, objective: categoricalSingleObjective, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
columnLabel: "% Value",
},
{
type: "metricGoal",
valueFormatter: "percent",
},
{
type: "layerToggle",
},
] })));
};
export const tableWithNanValue = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: NaNPercMetrics, metricGroup: categoricalMetricGroup, objective: categoricalSingleObjective, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
columnLabel: "% Value",
},
{
type: "metricGoal",
valueFormatter: "percent",
},
{
type: "layerToggle",
},
] })));
};
export const valueFormatAndLabel = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: categoricalClassMetrics, metricGroup: categoricalMetricGroup, objective: categoricalMultiObjective, columnConfig: [
{
type: "class",
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: (val) => (typeof val === "string" ? Number.parseFloat(val) : val) * 1000,
valueLabel: "ideas",
},
] })));
};
export const chartWithSeparateSortableValueColumn = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: categoricalClassMetrics, metricGroup: categoricalMetricGroup, objective: categoricalSingleObjective, columnConfig: [
{
type: "class",
width: 30,
},
{
type: "metricValue",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
width: 15,
colStyle: { textAlign: "right" },
columnLabel: "%",
},
{
type: "metricChart",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
columnLabel: "Found Within plan",
chartOptions: {
showTitle: false,
},
width: 55,
},
] })));
};
export const chartWithIntegratedValueAndTargetPass = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: categoricalClassMetrics, metricGroup: categoricalMetricGroup, objective: categoricalSingleObjective, columnConfig: [
{
type: "class",
width: 30,
},
{
type: "metricChart",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
columnLabel: "Found Within plan",
chartOptions: {
showTitle: true,
},
width: 55,
},
] })));
};
export const chartWithNanValue = () => {
return (React.createElement(Translator, null,
React.createElement("p", null, "Bays and Coast data class in this story has a NaN value. This use case happens when no features for a data class overlap with a given geography. In this scenario a NaN metric value is produced by toPercentMetric(), because the denominator value is zero. ClassTable picks up on this and displays more information to the user()"),
React.createElement(ClassTable, { rows: NaNPercMetrics, metricGroup: categoricalMetricGroup, objective: categoricalSingleObjective, columnConfig: [
{
type: "class",
width: 30,
},
{
type: "metricChart",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
columnLabel: "Found Within plan",
chartOptions: {
showTitle: true,
},
width: 55,
},
] })));
};
export const chartWithObjective = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: categoricalClassMetrics, metricGroup: categoricalMetricGroup, objective: categoricalSingleObjective, columnConfig: [
{
type: "class",
width: 30,
},
{
type: "metricChart",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
columnLabel: "Found Within Plan",
chartOptions: {
showTitle: true,
targetLabelStyle: "tight",
},
width: 55,
},
] })));
};
export const chartWithMixedTarget = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: categoricalClassMetricsMixedTarget, metricGroup: categoricalMetricGroupMixedTarget, objective: categoricalSingleObjective, columnConfig: [
{
type: "class",
width: 45,
},
{
type: "metricChart",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
columnLabel: "Found Within Plan",
chartOptions: {
showTitle: true,
targetLabelPosition: "bottom",
targetLabelStyle: "tight",
},
width: 40,
targetValueFormatter: (value, row) => {
if (row === 0) {
return (value) => `${valueFormatter(value / 100, "percent0dig")} Target`;
}
else {
return (value) => `${valueFormatter(value / 100, "percent0dig")}`;
}
},
},
{
type: "layerToggle",
width: 15,
},
] })));
};
export const chartWithSeparateTargetColumn = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: categoricalClassMetricsMixedTarget, metricGroup: categoricalMetricGroupMixedTarget, objective: categoricalSingleObjective, columnConfig: [
{
type: "class",
width: 30,
},
{
type: "metricChart",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
columnLabel: "Found Within Plan",
chartOptions: {
showTitle: true,
targetLabelPosition: "bottom",
targetLabelStyle: "tight",
showTargetLabel: false,
},
width: 55,
},
{
type: "metricGoal",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
width: 15,
colStyle: { textAlign: "right" },
columnLabel: "Target",
},
] })));
};
export const chartWithWideTitle = () => {
return (React.createElement(Translator, null,
React.createElement(ClassTable, { rows: longClassMetrics, metricGroup: categoricalMetricGroup, objective: categoricalSingleObjective, columnConfig: [
{
type: "class",
width: 30,
},
{
type: "metricChart",
metricId: simpleMetricGroup.metricId,
valueFormatter: "percent",
columnLabel: "Found Within Plan",
chartOptions: {
showTitle: true,
titleWidth: 50,
targetLabelStyle: "tight",
},
width: 55,
},
] })));
};
//# sourceMappingURL=ClassTable.stories.js.map