How to use the @patternfly/react-tokens.chart_color_blue_300.value function in @patternfly/react-tokens

To help you get started, we’ve selected a few @patternfly/react-tokens examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github openshift / console / frontend / packages / operator-lifecycle-manager / src / components / descriptors / status / pods.tsx View on Github external
import * as _ from 'lodash';
import * as React from 'react';
import { ChartDonut } from '@patternfly/react-charts';
import {
  /* eslint-disable camelcase */
  chart_color_blue_100 as blue100,
  chart_color_blue_200 as blue200,
  chart_color_blue_300 as blue300,
  /* eslint-enable camelcase */
} from '@patternfly/react-tokens';
import { useRefWidth } from '@console/internal/components/utils';
import { Descriptor } from '../types';

const colorScale = [blue300.value, blue200.value, blue100.value];

export const PodStatusChart: React.SFC = ({ statuses, statusDescriptor }) => {
  const [ref, width] = useRefWidth();
  const data = _.map(statuses, (podList, status) => {
    const x = status;
    const y = podList.length;
    return {
      label: `${y} ${x}`,
      x,
      y,
    };
  });
  const total = data.reduce((sum, dataPoint) => sum + dataPoint.y, 0);

  return (
    <div></div>
github patternfly / patternfly-react / packages / patternfly-4 / react-charts / src / components / ChartTheme / themes / light / multi-color-unordered-theme.ts View on Github external
chart_color_orange_200,
  chart_color_orange_300,
  chart_color_orange_400,
  chart_color_orange_500,
  chart_color_black_100,
  chart_color_black_200,
  chart_color_black_300,
  chart_color_black_400,
  chart_color_black_500
} from '@patternfly/react-tokens';
import { ColorTheme } from '../color-theme';

// The color order below improves the color contrast in unordered charts; area & line
// See https://github.com/patternfly/patternfly-next/issues/1551
const COLOR_SCALE = [
  chart_color_blue_300.value,
  chart_color_gold_300.value,
  chart_color_green_300.value,
  chart_color_purple_300.value,
  chart_color_orange_300.value,
  chart_color_cyan_300.value,
  chart_color_black_300.value,
  chart_color_blue_100.value,
  chart_color_gold_500.value,
  chart_color_green_100.value,
  chart_color_purple_500.value,
  chart_color_orange_100.value,
  chart_color_cyan_500.value,
  chart_color_black_100.value,
  chart_color_blue_500.value,
  chart_color_gold_100.value,
  chart_color_green_500.value,
github patternfly / patternfly-react / packages / patternfly-4 / react-charts / src / components / ChartTheme / themes / light / blue-color-theme.ts View on Github external
/* eslint-disable camelcase */
import {
  chart_color_blue_100,
  chart_color_blue_200,
  chart_color_blue_300,
  chart_color_blue_400,
  chart_color_blue_500
} from '@patternfly/react-tokens';
import { ColorTheme } from '../color-theme';

// Color scale
// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
const COLOR_SCALE = [
  chart_color_blue_300.value,
  chart_color_blue_100.value,
  chart_color_blue_500.value,
  chart_color_blue_200.value,
  chart_color_blue_400.value
];

export const LightBlueColorTheme = ColorTheme({
  COLOR_SCALE
});
github patternfly / patternfly-react / packages / patternfly-4 / react-charts / src / components / ChartTheme / themes / dark / blue-color-theme.ts View on Github external
/* eslint-disable camelcase */
import {
  chart_color_blue_100,
  chart_color_blue_200,
  chart_color_blue_300,
  chart_color_blue_400,
  chart_color_blue_500
} from '@patternfly/react-tokens';
import { ColorTheme } from '../color-theme';

// Color scale
// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
const COLOR_SCALE = [
  chart_color_blue_300.value,
  chart_color_blue_100.value,
  chart_color_blue_500.value,
  chart_color_blue_200.value,
  chart_color_blue_400.value
];

export const DarkBlueColorTheme = ColorTheme({
  COLOR_SCALE
});
github patternfly / patternfly-react / packages / patternfly-4 / react-charts / src / components / ChartTheme / themes / dark / multi-color-unordered-theme.ts View on Github external
chart_color_orange_200,
  chart_color_orange_300,
  chart_color_orange_400,
  chart_color_orange_500,
  chart_color_black_100,
  chart_color_black_200,
  chart_color_black_300,
  chart_color_black_400,
  chart_color_black_500
} from '@patternfly/react-tokens';
import { ColorTheme } from '../color-theme';

// The color order below improves the color contrast in unordered charts; area & line
// See https://github.com/patternfly/patternfly-next/issues/1551
const COLOR_SCALE = [
  chart_color_blue_300.value,
  chart_color_gold_300.value,
  chart_color_green_300.value,
  chart_color_purple_300.value,
  chart_color_orange_300.value,
  chart_color_cyan_300.value,
  chart_color_black_300.value,
  chart_color_blue_100.value,
  chart_color_gold_500.value,
  chart_color_green_100.value,
  chart_color_purple_500.value,
  chart_color_orange_100.value,
  chart_color_cyan_500.value,
  chart_color_black_100.value,
  chart_color_blue_500.value,
  chart_color_gold_100.value,
  chart_color_green_500.value,