github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/statements/barCharts.stories.tsx (about)

     1  // Copyright 2020 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import React from "react";
    12  import { storiesOf, RenderFunction } from "@storybook/react";
    13  
    14  import { countBarChart, latencyBarChart, retryBarChart, rowsBarChart } from "./barCharts";
    15  import statementsPagePropsFixture from "./statementsPage.fixture";
    16  
    17  const { statements } = statementsPagePropsFixture;
    18  
    19  const withinColumn = (width = "150px") => (storyFn: RenderFunction) => {
    20    const rowStyle = {
    21      borderTop: "1px solid #e7ecf3",
    22      borderBottom: "1px solid #e7ecf3",
    23    };
    24  
    25    const cellStyle = {
    26      width: "190px",
    27      padding: "10px 20px",
    28    };
    29  
    30    return (
    31      <table>
    32        <tbody>
    33        <tr style={rowStyle}>
    34          <td style={cellStyle}>
    35            <div style={{ width }}>
    36              { storyFn() }
    37            </div>
    38          </td>
    39        </tr>
    40        </tbody>
    41      </table>
    42    );
    43  };
    44  
    45  storiesOf("BarCharts", module)
    46    .add("countBarChart", () => {
    47      const chartFactory = countBarChart(statements);
    48      return chartFactory(statements[0]);
    49    })
    50    .add("latencyBarChart", () => {
    51      const chartFactory = latencyBarChart(statements);
    52      return chartFactory(statements[0]);
    53    })
    54    .add("retryBarChart", () => {
    55      const chartFactory = retryBarChart(statements);
    56      return chartFactory(statements[0]);
    57    })
    58    .add("rowsBarChart", () => {
    59      const chartFactory = rowsBarChart(statements);
    60      return chartFactory(statements[0]);
    61    });
    62  
    63  storiesOf("BarCharts/within column (150px)", module)
    64    .addDecorator(withinColumn())
    65    .add("countBarChart", () => {
    66      const chartFactory = countBarChart(statements);
    67      return chartFactory(statements[0]);
    68    })
    69    .add("latencyBarChart", () => {
    70      const chartFactory = latencyBarChart(statements);
    71      return chartFactory(statements[0]);
    72    })
    73    .add("retryBarChart", () => {
    74      const chartFactory = retryBarChart(statements);
    75      return chartFactory(statements[0]);
    76    })
    77    .add("rowsBarChart", () => {
    78      const chartFactory = rowsBarChart(statements);
    79      return chartFactory(statements[0]);
    80    });