Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Add color palettes in use across OpenSearch Dashboards #601

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Docs: Add color palettes in use across OpenSearch Dashboards #601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bff4de6
Docs: Add color palettes in use across OpenSearch Dashboards and plug…
joshuarrrr Mar 16, 2023
c2db75d
Move readme
joshuarrrr Mar 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
411 changes: 411 additions & 0 deletions src-docs/src/views/color_palette/color_palette.js
View file
Open in desktop

Large diffs are not rendered by default.

204 changes: 203 additions & 1 deletion src-docs/src/views/color_palette/color_palette_quantitative.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import {
OuiRange,
OuiFormRow,
OuiSpacer,
OuiTitle,
OuiText,
} from '../../../../src/components';

import { ColorPaletteFlexItem, ColorPaletteCopyCode } from './shared';
Expand All @@ -31,6 +33,16 @@ import {
ouiPalettePositive,
ouiPaletteGray,
} from '../../../../src/services';
import {
colorSchemas,
getHeatmapColors,
truncatedColorMaps,
} from './osd_legacy_color_maps/color_maps';
import { getLegendColors } from './osd_legacy_color_maps/color_util';
import { COLOR_PALETTES as observabilityColorPalettes } from './osd_legacy_color_maps/observability_colors';
import { serviceMapColorPalette } from './osd_legacy_color_maps/observability_trace_analytics_color_palettes';
import { OuiLink } from '../../../../src/components/link';

const paletteData = {
ouiPaletteForStatus,
ouiPaletteForTemperature,
Expand Down Expand Up @@ -64,7 +76,10 @@ export default () => {
</OuiFormRow>

<OuiSpacer />

<OuiTitle size="xxs">
<h3>OUI palettes (not in use in OpenSearch Dashboards)</h3>
</OuiTitle>
<OuiSpacer size="s" />
{paletteNames.map((paletteName) => (
<OuiFlexGroup alignItems="center" key={paletteName}>
<OuiFlexItem grow={false}>
Expand All @@ -85,6 +100,193 @@ export default () => {
</OuiFlexItem>
</OuiFlexGroup>
))}
<OuiSpacer />
<OuiTitle size="xxs">
<h3>
OpenSearch Dashboards color schemas (VisLib Gauge, VisLib Goal, VisLib
Heatmap, Metric) via{' '}
<OuiLink href="https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/plugins/charts/public/static/color_maps/heatmap_color.ts#LL69C13-L69C13">
getHeatmapColors()
</OuiLink>{' '}
(
<OuiLink href="https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/plugins/charts/public/static/color_maps/color_maps.ts">
source code
</OuiLink>
)
</h3>
</OuiTitle>
<OuiSpacer size="s" />
{colorSchemas.map(({ value }) => (
<OuiFlexGroup alignItems="center" key={value}>
<OuiFlexItem grow={false}>
<OuiFlexGroup
className="guideColorPalette__swatchHolder"
gutterSize="none"
responsive={false}>
{Array.from(Array(Number(length)).keys()).map((index) => {
const divider = Math.max(length - 1, 1);
const hexCode = getHeatmapColors(index / divider, value);

return <ColorPaletteFlexItem hexCode={hexCode} key={hexCode} />;
})}
</OuiFlexGroup>
</OuiFlexItem>
<OuiFlexItem>
<ColorPaletteCopyCode
textToCopy={`${value}(${length});`}
code={`${value}(${length})`}
/>
</OuiFlexItem>
{value === 'Green to Red' && (
<OuiFlexItem>
<OuiText>Default for Gauge, Goal, Metric</OuiText>
</OuiFlexItem>
)}
{value === 'Greens' && (
<OuiFlexItem>
<OuiText>Default for Heatmap</OuiText>
</OuiFlexItem>
)}
</OuiFlexGroup>
))}

<OuiSpacer />
<OuiTitle size="xxs">
<h3>
OpenSearch Dashboards choropleth scales (Region Map, Coordinate Map)
via truncatedColorMaps and getLegendColors() (
<OuiLink href="https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/plugins/charts/public/static/color_maps/truncated_color_maps.ts#L33-L46">
source code
</OuiLink>
)
</h3>
</OuiTitle>
<OuiSpacer size="s" />
{colorSchemas.map(({ value }) => (
<OuiFlexGroup alignItems="center" key={value}>
<OuiFlexItem grow={false}>
<OuiFlexGroup
className="guideColorPalette__swatchHolder"
gutterSize="none"
responsive={false}>
{getLegendColors(
truncatedColorMaps[value].value,
Number(length)
).map((hexCode) => {
return <ColorPaletteFlexItem hexCode={hexCode} key={hexCode} />;
})}
</OuiFlexGroup>
</OuiFlexItem>
<OuiFlexItem>
<ColorPaletteCopyCode
textToCopy={`${value}(${length});`}
code={`${value}(${length})`}
/>
</OuiFlexItem>
{value === 'Yellow to Red' && (
<OuiFlexItem>
<OuiText>Default for Region Map, Coordinate Map</OuiText>
</OuiFlexItem>
)}
</OuiFlexGroup>
))}
<OuiSpacer />
<OuiTitle size="xxs">
<h3>
OpenSearch Dashboards Observability Heat Map schemes via
colorPalette() (
<OuiLink href="https://github.com/opensearch-project/dashboards-observability/blob/main/common/constants/colors.ts">
source code
</OuiLink>
)
</h3>
</OuiTitle>
<OuiSpacer size="s" />
{observabilityColorPalettes
.filter(({ palette }) => palette)
.map(({ title, palette }) => (
<OuiFlexGroup alignItems="center" key={title}>
<OuiFlexItem grow={false}>
<OuiFlexGroup
className="guideColorPalette__swatchHolder"
gutterSize="none"
responsive={false}>
{palette
.filter((_x, i) => {
if (palette.length <= length) {
return true;
}
const sampledIndices = Array.from(
Array(length - 1).keys()
).map((x) =>
Math.round((x * palette.length) / (length - 1))
);

return (
i === palette.length - 1 || sampledIndices.includes(i)
);
})
.reverse()
.map((hexCode) => {
return (
<ColorPaletteFlexItem hexCode={hexCode} key={hexCode} />
);
})}
</OuiFlexGroup>
</OuiFlexItem>
<OuiFlexItem>
<ColorPaletteCopyCode
textToCopy={`${title}(${length}, downsampled from ${palette.length});`}
code={`${title}(${length}, downsampled from ${palette.length})`}
/>
</OuiFlexItem>
{title === 'Reds' && (
<OuiFlexItem>
<OuiText>Default for Observability Heat Map</OuiText>
</OuiFlexItem>
)}
</OuiFlexGroup>
))}
<OuiSpacer />
<OuiTitle size="xxs">
<h3>
OpenSearch Dashboards Observability Trace Analytics palettes (
<OuiLink href="https://github.com/opensearch-project/dashboards-observability/blob/main/public/components/trace_analytics/components/common/color_palette.ts">
source code
</OuiLink>
)
</h3>
</OuiTitle>
<OuiSpacer size="s" />
{Object.entries(serviceMapColorPalette).map(([key, value]) => (
<OuiFlexGroup alignItems="center" key={key}>
<OuiFlexItem grow={false}>
<OuiFlexGroup
className="guideColorPalette__swatchHolder"
gutterSize="none"
responsive={false}>
{value
.filter((_x, i) => {
const sampledIndices = Array.from(
Array(length - 1).keys()
).map((x) => Math.round((x * value.length) / (length - 1)));

return i === value.length - 1 || sampledIndices.includes(i);
})
.map((rgbValues) => {
const rgb = `rgb(${rgbValues})`;
return <ColorPaletteFlexItem hexCode={rgb} key={rgb} />;
})}
</OuiFlexGroup>
</OuiFlexItem>
<OuiFlexItem>
<ColorPaletteCopyCode
textToCopy={`${key}(${length}, downsampled from ${value.length});`}
code={`${key}(${length}, downsampled from ${value.length})`}
/>
</OuiFlexItem>
</OuiFlexGroup>
))}
</Fragment>
);
};
5 changes: 5 additions & 0 deletions src-docs/src/views/color_palette/osd_legacy_color_maps/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Legacy color palettes

In some cases, the easiest way to add existing in-use color palettes to the doc site was to copy the source files from other repositories here. But the originals will remain the source of truth.

Last updated 2023-03-16
Loading