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

     1  import PieChart from "./index";
     2  import { PanelStoryDecorator } from "../../../../utils/storybook";
     3  
     4  const story = {
     5    title: "Charts/Pie",
     6    component: PieChart.component,
     7  };
     8  
     9  export default story;
    10  
    11  const Template = (args) => (
    12    <PanelStoryDecorator
    13      definition={{ ...args, display_type: "pie" }}
    14      panelType="chart"
    15    />
    16  );
    17  
    18  export const Loading = Template.bind({});
    19  Loading.args = {
    20    loading: true,
    21  };
    22  
    23  export const Error = Template.bind({});
    24  Error.args = {
    25    loading: false,
    26    error: "Something went wrong!",
    27  };
    28  
    29  export const SingleSeries = Template.bind({});
    30  SingleSeries.storyName = "Single Series";
    31  SingleSeries.args = {
    32    data: {
    33      columns: [
    34        { name: "Type", data_type: "TEXT" },
    35        { name: "Count", data_type: "INT8" },
    36      ],
    37      rows: [
    38        { Type: "User", Count: 12 },
    39        { Type: "Policy", Count: 93 },
    40        { Type: "Role", Count: 48 },
    41      ],
    42    },
    43  };
    44  
    45  export const LargeSeries = Template.bind({});
    46  LargeSeries.args = {
    47    data: {
    48      columns: [
    49        { name: "Region", data_type: "TEXT" },
    50        { name: "Total", data_type: "INT8" },
    51      ],
    52      rows: [
    53        { Region: "us-east-1", Total: 14 },
    54        { Region: "eu-central-1", Total: 6 },
    55        { Region: "ap-south-1", Total: 4 },
    56        { Region: "ap-southeast-1", Total: 3 },
    57        { Region: "ap-southeast-2", Total: 2 },
    58        { Region: "ca-central-1", Total: 2 },
    59        { Region: "eu-north-1", Total: 2 },
    60        { Region: "eu-west-1", Total: 1 },
    61        { Region: "eu-west-2", Total: 1 },
    62        { Region: "eu-west-3", Total: 1 },
    63        { Region: "sa-east-1", Total: 1 },
    64        { Region: "us-east-2", Total: 1 },
    65        { Region: "us-west-1", Total: 1 },
    66        { Region: "ap-northeast-1", Total: 1 },
    67        { Region: "us-west-2", Total: 1 },
    68        { Region: "ap-northeast-2", Total: 1 },
    69      ],
    70    },
    71  };
    72  
    73  export const MultiSeries = Template.bind({});
    74  MultiSeries.storyName = "Multi-Series";
    75  MultiSeries.args = {
    76    data: {
    77      columns: [
    78        { name: "Country", data_type: "TEXT" },
    79        { name: "Men", data_type: "INT8" },
    80        { name: "Women", data_type: "INT8" },
    81        { name: "Children", data_type: "INT8" },
    82      ],
    83      rows: [
    84        { Country: "England", Men: 16000000, Women: 13000000, Children: 8000000 },
    85        { Country: "Scotland", Men: 8000000, Women: 7000000, Children: 3000000 },
    86        {
    87          Country: "Wales",
    88          Men: 5000000,
    89          Women: 3000000,
    90          Children: 2500000,
    91        },
    92        {
    93          Country: "Northern Ireland",
    94          Men: 3000000,
    95          Women: 2000000,
    96          Children: 1000000,
    97        },
    98      ],
    99    },
   100  };
   101  
   102  export const PointColorOverrides = Template.bind({});
   103  PointColorOverrides.args = {
   104    data: {
   105      columns: [
   106        { name: "versioning_status", data_type: "TEXT" },
   107        { name: "Total", data_type: "INT8" },
   108      ],
   109      rows: [
   110        { versioning_status: "Disabled", Total: 2 },
   111        { versioning_status: "Enabled", Total: 14 },
   112      ],
   113    },
   114    properties: {
   115      series: {
   116        Total: {
   117          points: {
   118            Disabled: { name: "Disabled", color: "alert" },
   119            Enabled: { name: "Enabled", color: "ok" },
   120          },
   121        },
   122      },
   123    },
   124  };