github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/dashboards/charts/Chart/index.stories.js (about)

     1  import Chart from "./index";
     2  import { PanelStoryDecorator } from "../../../../utils/storybook";
     3  
     4  const story = {
     5    title: "Charts/Chart",
     6    component: Chart,
     7    excludeStories: ["SingleTimeSeriesDefaults", "MultiTimeSeriesDefaults", "MultiTimeSeriesGroupedDefaults", "MultiTimeSeriesCrosstabDefaults"]
     8  };
     9  
    10  export default story;
    11  
    12  const Template = (args) => (
    13    <PanelStoryDecorator definition={args} panelType="chart" />
    14  );
    15  
    16  export const DefaultsToColumn = Template.bind({});
    17  DefaultsToColumn.args = {
    18    data: {
    19      columns: [
    20        { name: "Type", data_type: "TEXT" },
    21        { name: "Count", data_type: "INT8" },
    22      ],
    23      rows: [
    24        { Type: "User", Count: 12 },
    25        { Type: "Policy", Count: 93 },
    26        { Type: "Role", Count: 48 },
    27      ],
    28    },
    29  };
    30  
    31  export const SingleTimeSeriesDefaults = {
    32    data: {
    33      columns: [
    34        { name: "time", data_type: "TIMESTAMP" },
    35        { name: "count", data_type: "INT8" },
    36      ],
    37      rows: [
    38        { time: "2023-01-01T00:00:00.000", count: 20 },
    39        { time: "2023-02-01T00:00:00.000", count: 32 },
    40        { time: "2023-04-01T00:00:00.000", count: -15 },
    41        { time: "2023-05-01T00:00:00.000", count: 18 },
    42        { time: "2023-06-01T00:00:00.000", count: -9 },
    43        { time: "2023-12-01T00:00:00.000", count: 3 },
    44      ],
    45    },
    46  };
    47  
    48  const MultiTimeSeriesDataSample = {
    49    columns: [
    50      { name: "time", data_type: "TIMESTAMPTZ" },
    51      { name: "Income", data_type: "INT8" },
    52      { name: "Spending", data_type: "INT8" },
    53    ],
    54    rows: [
    55      { time: "2023-01-01T00:00:00.000Z", Income: 20, Spending: 0 },
    56      { time: "2023-02-01T00:00:00.000Z", Income: 18, Spending: 32 },
    57      { time: "2023-04-01T00:00:00.000Z", Income: 15, Spending: 3 },
    58      { time: "2023-05-01T00:00:00.000Z", Income: 18, Spending: 15 },
    59      { time: "2023-06-01T00:00:00.000Z", Income: 0, Spending: 9 },
    60      { time: "2023-09-01T00:00:00.000Z", Income: 7, Spending: 26 },
    61      { time: "2023-12-01T00:00:00.000Z", Income: 8, Spending: 3 },
    62    ],
    63  };
    64  const MultiTimeSeriesCrosstabDataSample = {
    65    columns: [
    66      { name: "time", data_type: "DATE" },
    67      { name: "series_name", data_type: "TEXT" },
    68      { name: "value", data_type: "INT8" },
    69    ],
    70    rows: [
    71      { time: "2023-01-01", series_name: "Income", value: 20},
    72      { time: "2023-01-01", series_name: "Spending", value: 0},
    73      { time: "2023-02-01", series_name: "Income", value: 18},
    74      { time: "2023-02-01", series_name: "Spending", value: 32},
    75      { time: "2023-04-01", series_name: "Income", value: 15},
    76      { time: "2023-04-01", series_name: "Spending", value: 3},
    77      { time: "2023-05-01", series_name: "Income", value: 18},
    78      { time: "2023-05-01", series_name: "Spending", value: 15},
    79      { time: "2023-06-01", series_name: "Income", value: 0},
    80      { time: "2023-06-01", series_name: "Spending", value: 9},
    81      { time: "2023-09-01", series_name: "Income", value: 7},
    82      { time: "2023-09-01", series_name: "Spending", value: 26},
    83      { time: "2023-12-01", series_name: "Income", value: 8},
    84      { time: "2023-12-01", series_name: "Spending", value: 3},
    85    ],
    86  };
    87  
    88  export const MultiTimeSeriesDefaults = {
    89    data: MultiTimeSeriesDataSample,
    90    properties: {
    91      series: {
    92        Income: {
    93          color: "green"
    94        },
    95        Spending: {
    96          color: "red"
    97        },
    98      }
    99    },
   100  };
   101  
   102  export const MultiTimeSeriesCrosstabDefaults = {
   103    ...MultiTimeSeriesDefaults,
   104    data: MultiTimeSeriesCrosstabDataSample,
   105  };
   106  
   107  export const MultiTimeSeriesGroupedDefaults = {
   108    data: MultiTimeSeriesDataSample,
   109    properties: {
   110      ...(MultiTimeSeriesDefaults.properties),
   111      grouping: "compare",
   112    },
   113  };