@patternfly/react-core 5.2.0-prerelease.2 → 5.2.0-prerelease.20

package/src/demos/examples/Card/CardUtilizationDemo2.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import {
+  Card,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  Title,
+  Gallery,
+  GalleryItem,
+  Flex,
+  FlexItem,
+  Stack,
+  Divider
+} from '@patternfly/react-core';
+import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+
+export const CardUtilizationDemo2: React.FunctionComponent = () => (
+  <Gallery hasGutter minWidths={{ default: '360px' }}>
+    <GalleryItem>
+      <Card id="utilization-card-2-card" component="div">
+        <CardTitle>
+          <Title headingLevel="h4" size="lg">
+            Top Utilized Clusters
+          </Title>
+        </CardTitle>
+        <CardBody>
+          <Flex direction={{ default: 'column' }}>
+            <FlexItem>
+              <Stack>
+                <a href="#">Cluster-1204</a>
+                <span>27.3 cores available</span>
+              </Stack>
+            </FlexItem>
+            <FlexItem>
+              <ChartGroup
+                ariaDesc="Mock average cluster utilization"
+                ariaTitle="Mock cluster sparkline chart"
+                containerComponent={
+                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+                }
+                height={100}
+                maxDomain={{ y: 9 }}
+                padding={0}
+                width={400}
+              >
+                <ChartArea
+                  data={[
+                    { name: 'Cluster', x: '2015', y: 7 },
+                    { name: 'Cluster', x: '2016', y: 6 },
+                    { name: 'Cluster', x: '2017', y: 8 },
+                    { name: 'Cluster', x: '2018', y: 3 },
+                    { name: 'Cluster', x: '2019', y: 4 },
+                    { name: 'Cluster', x: '2020', y: 1 },
+                    { name: 'Cluster', x: '2021', y: 0 }
+                  ]}
+                />
+              </ChartGroup>
+            </FlexItem>
+          </Flex>
+        </CardBody>
+        <CardBody>
+          <Flex direction={{ default: 'column' }}>
+            <FlexItem>
+              <Stack>
+                <a href="#">Abcdef-1204</a>
+                <span>50.6 cores available</span>
+              </Stack>
+            </FlexItem>
+            <FlexItem>
+              <ChartGroup
+                ariaDesc="Mock average cluster utilization"
+                ariaTitle="Mock cluster sparkline chart"
+                containerComponent={
+                  <ChartVoronoiContainer labels={({ datum }) => `${datum.name}: ${datum.y}`} constrainToVisibleArea />
+                }
+                height={100}
+                maxDomain={{ y: 9 }}
+                padding={0}
+                width={400}
+              >
+                <ChartArea
+                  data={[
+                    { name: 'Cluster', x: '2015', y: 7 },
+                    { name: 'Cluster', x: '2016', y: 6 },
+                    { name: 'Cluster', x: '2017', y: 8 },
+                    { name: 'Cluster', x: '2018', y: 3 },
+                    { name: 'Cluster', x: '2019', y: 4 },
+                    { name: 'Cluster', x: '2020', y: 1 },
+                    { name: 'Cluster', x: '2021', y: 0 }
+                  ]}
+                />
+              </ChartGroup>
+            </FlexItem>
+          </Flex>
+        </CardBody>
+        <Divider />
+        <CardFooter>
+          <a href="#">View all clusters</a>
+        </CardFooter>
+      </Card>
+    </GalleryItem>
+  </Gallery>
+);

package/src/demos/examples/Card/CardUtilizationDemo3.tsx

@@ -0,0 +1,174 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import {
+  Card,
+  CardTitle,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Title,
+  Gallery,
+  GalleryItem,
+  Flex,
+  FlexItem,
+  Select,
+  SelectList,
+  SelectOption,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts';
+import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';
+import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
+import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
+import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
+import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
+import text from '@patternfly/react-styles/css/utilities/Text/text';
+
+export const CardUtilizationDemo3: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const selectItems = (
+    <SelectList>
+      <SelectOption key="option1" value="Last hour">
+        Last hour
+      </SelectOption>
+      <SelectOption key="option2" value="Last 6 hours">
+        Last 6 hours
+      </SelectOption>
+      <SelectOption key="option3" value="Last 24 hours">
+        Last 24 hours
+      </SelectOption>
+      <SelectOption key="option4" value="Last 7 days">
+        Last 7 days
+      </SelectOption>
+    </SelectList>
+  );
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle ref={toggleRef} onClick={() => setIsOpen(!isOpen)} isExpanded={isOpen} variant="plainText">
+      Filter
+    </MenuToggle>
+  );
+
+  const headerActions = (
+    <Select onSelect={() => setIsOpen(!isOpen)} onOpenChange={setIsOpen} isOpen={isOpen} toggle={toggle}>
+      {selectItems}
+    </Select>
+  );
+
+  return (
+    <React.Fragment>
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
+      <Gallery hasGutter minWidths={{ default: '360px' }}>
+        <GalleryItem>
+          <Card id="utilization-card-3-card" component="div">
+            <CardHeader className={flex.alignItemsFlexStart} actions={{ actions: headerActions, hasNoOffset: true }}>
+              <CardTitle>
+                <Title headingLevel="h4" size="lg" style={{ paddingTop: '3px' }}>
+                  Recommendations
+                </Title>
+              </CardTitle>
+            </CardHeader>
+            <CardBody>
+              <Flex direction={{ default: 'column' }}>
+                <FlexItem>
+                  <span>System</span>
+                </FlexItem>
+                <Flex>
+                  <ExclamationCircleIcon className={text.dangerColor_100} aria-hidden />
+                  <a href="#">25 incidents detected</a>
+                </Flex>
+                <FlexItem>
+                  <Chart
+                    ariaDesc="Mock incidents chart"
+                    ariaTitle="Mock stack chart"
+                    domainPadding={{ x: [30, 25] }}
+                    legendData={[
+                      { name: 'Low', symbol: { fill: chart_color_gold_100.value } },
+                      { name: 'Important', symbol: { fill: chart_color_gold_300.value } },
+                      { name: 'Moderate', symbol: { fill: chart_color_orange_300.value } },
+                      { name: 'Critical', symbol: { fill: chart_color_red_100.value } }
+                    ]}
+                    legendPosition="bottom-left"
+                    height={50}
+                    padding={{
+                      bottom: 40,
+                      left: 0,
+                      right: 0,
+                      top: 0
+                    }}
+                    width={350}
+                    showAxis={false}
+                  >
+                    <ChartStack
+                      horizontal
+                      colorScale={[
+                        chart_color_gold_100.value,
+                        chart_color_gold_300.value,
+                        chart_color_orange_300.value,
+                        chart_color_red_100.value
+                      ]}
+                    >
+                      <ChartBar
+                        data={[
+                          {
+                            name: 'Low',
+                            x: 'Cluster A',
+                            y: 6,
+                            label: 'Low: 6'
+                          }
+                        ]}
+                        labelComponent={<ChartTooltip constrainToVisibleArea />}
+                      />
+                      <ChartBar
+                        data={[
+                          {
+                            name: 'Important',
+                            x: 'Cluster A',
+                            y: 2,
+                            label: 'Important: 2'
+                          }
+                        ]}
+                        labelComponent={<ChartTooltip constrainToVisibleArea />}
+                      />
+                      <ChartBar
+                        data={[
+                          {
+                            name: 'Moderate',
+                            x: 'Cluster A',
+                            y: 4,
+                            label: 'Moderate: 4'
+                          }
+                        ]}
+                        labelComponent={<ChartTooltip constrainToVisibleArea />}
+                      />
+                      <ChartBar
+                        data={[
+                          {
+                            name: 'Critical',
+                            x: 'Cluster A',
+                            y: 2,
+                            label: 'Critical: 2'
+                          }
+                        ]}
+                        labelComponent={<ChartTooltip constrainToVisibleArea />}
+                      />
+                    </ChartStack>
+                  </Chart>
+                </FlexItem>
+              </Flex>
+            </CardBody>
+            <CardFooter>
+              <a href="#">See details</a>
+            </CardFooter>
+          </Card>
+        </GalleryItem>
+      </Gallery>
+    </React.Fragment>
+  );
+};

package/src/demos/examples/Card/CardUtilizationDemo4.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Card, CardTitle, CardBody, CardFooter, Title, Gallery, GalleryItem } from '@patternfly/react-core';
+import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
+
+export const CardUtilizationDemo4: React.FunctionComponent = () => (
+  <Gallery hasGutter minWidths={{ default: '360px' }}>
+    <GalleryItem>
+      <Card id="utilization-card-4-card" component="div">
+        <CardTitle>
+          <Title headingLevel="h4" size="lg">
+            CPU Usage
+          </Title>
+        </CardTitle>
+        <CardBody>
+          <ChartDonutThreshold
+            ariaDesc="Mock storage capacity"
+            ariaTitle="Mock donut utilization chart"
+            constrainToVisibleArea={true}
+            data={[
+              { x: 'Warning at 60%', y: 60 },
+              { x: 'Danger at 90%', y: 90 }
+            ]}
+            height={200}
+            labels={({ datum }) => (datum.x ? datum.x : null)}
+            padding={{
+              bottom: 0,
+              left: 10,
+              right: 150,
+              top: 0
+            }}
+            width={350}
+          >
+            <ChartDonutUtilization
+              data={{ x: 'Storage capacity', y: 80 }}
+              labels={({ datum }) => (datum.x ? `${datum.x}: ${datum.y}%` : null)}
+              legendData={[{ name: `Capacity: 80%` }, { name: 'Warning at 60%' }, { name: 'Danger at 90%' }]}
+              legendOrientation="vertical"
+              title="80%"
+              subTitle="of 100 GBps"
+              thresholds={[{ value: 60 }, { value: 90 }]}
+            />
+          </ChartDonutThreshold>{' '}
+        </CardBody>
+        <CardFooter>
+          <a href="#">See details</a>
+        </CardFooter>
+      </Card>
+    </GalleryItem>
+  </Gallery>
+);