-
Notifications
You must be signed in to change notification settings - Fork 843
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
dad682e
commit 1c451da
Showing
10 changed files
with
508 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import React, { Fragment } from 'react'; | ||
|
||
import { | ||
EuiFlexGroup, | ||
EuiFlexItem, | ||
EuiTitle, | ||
EuiSpacer, | ||
} from '../../../../src/components'; | ||
|
||
import { | ||
colorPalette, | ||
palettes, | ||
} from '../../../../src/services'; | ||
|
||
const availablePalettes = Object.keys(palettes); | ||
|
||
export default () => ( | ||
<Fragment> | ||
{ | ||
availablePalettes.map((paletteName, i) => ( | ||
<div key={paletteName}> | ||
<EuiTitle key={i} size="xxs"><h3>{paletteName}</h3></EuiTitle> | ||
<EuiSpacer size="s" /> | ||
<EuiFlexGroup gutterSize="none" alignItems="flexStart" key={`${paletteName}-${i}`}> | ||
{ | ||
colorPalette(paletteName).map((hexCode, j) => ( | ||
<EuiFlexItem key={`${hexCode}-${j}`} grow={false} className={'guideColorPalette__swatch'}> | ||
<span title={hexCode} style={{ backgroundColor: hexCode }} /> | ||
</EuiFlexItem> | ||
)) | ||
} | ||
</EuiFlexGroup> | ||
<EuiSpacer size="l" /> | ||
</div> | ||
)) | ||
} | ||
</Fragment> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import React, { Fragment } from 'react'; | ||
|
||
import { | ||
EuiFlexGroup, | ||
EuiFlexItem, | ||
EuiTitle, | ||
EuiSpacer, | ||
} from '../../../../src/components'; | ||
|
||
import { | ||
colorPalette, | ||
} from '../../../../src/services'; | ||
|
||
export default () => ( | ||
<Fragment> | ||
<EuiTitle size="xxs"><h3>Custom red to blue</h3></EuiTitle> | ||
<EuiSpacer size="s" /> | ||
<EuiFlexGroup gutterSize="none" alignItems="flexStart"> | ||
{ | ||
colorPalette('custom', 'FF0000', '#00FFFF', 25).map((hexCode, j) => ( | ||
<EuiFlexItem key={`${hexCode}-${j}`} grow={false} className={'guideColorPalette__swatch'}> | ||
<span title={hexCode} style={{ backgroundColor: hexCode }} /> | ||
</EuiFlexItem> | ||
)) | ||
} | ||
</EuiFlexGroup> | ||
<EuiSpacer size="l" /> | ||
<EuiTitle size="xxs"><h3>Custom yellow to green</h3></EuiTitle> | ||
<EuiSpacer size="s" /> | ||
<EuiFlexGroup gutterSize="none" alignItems="flexStart"> | ||
{ | ||
colorPalette('custom', '#F7EE55', '#4EB265', 20).map((hexCode, k) => ( | ||
<EuiFlexItem key={`${hexCode}-${k}`} grow={false} className={'guideColorPalette__swatch'}> | ||
<span title={hexCode} style={{ backgroundColor: hexCode }} /> | ||
</EuiFlexItem> | ||
)) | ||
} | ||
</EuiFlexGroup> | ||
<EuiSpacer size="l" /> | ||
<EuiTitle size="xxs"><h3>Custom green to red</h3></EuiTitle> | ||
<EuiSpacer size="s" /> | ||
<EuiFlexGroup gutterSize="none" alignItems="flexStart"> | ||
{ | ||
colorPalette('custom', '#4EB265', '#920000', 15).map((hexCode, l) => ( | ||
<EuiFlexItem key={`${hexCode}-${l}`} grow={false} className={'guideColorPalette__swatch'}> | ||
<span title={hexCode} style={{ backgroundColor: hexCode }} /> | ||
</EuiFlexItem> | ||
)) | ||
} | ||
</EuiFlexGroup> | ||
</Fragment> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
import React from 'react'; | ||
|
||
import { renderToHtml } from '../../services'; | ||
|
||
import { | ||
GuideSectionTypes, | ||
} from '../../components'; | ||
|
||
import { | ||
EuiCode, | ||
} from '../../../../src/components'; | ||
|
||
import ColorPalette from './color_palette'; | ||
const colorPaletteSource = require('!!raw-loader!./color_palette'); | ||
const colorPaletteHtml = renderToHtml(ColorPalette); | ||
|
||
import ColorPaletteCustom from './color_palette_custom'; | ||
const colorPaletteCustomSource = require('!!raw-loader!./color_palette_custom'); | ||
const colorPaletteCustomHtml = renderToHtml(ColorPaletteCustom); | ||
|
||
import ColorPaletteHistogram from './color_palette_histogram'; | ||
const colorPaletteHistogramSource = require('!!raw-loader!./color_palette_histogram'); | ||
const colorPaletteHistogramHtml = renderToHtml(ColorPaletteHistogram); | ||
|
||
export const ColorPaletteExample = { | ||
title: 'Color Palettes', | ||
sections: [{ | ||
title: 'Preset color palettes', | ||
source: [{ | ||
type: GuideSectionTypes.JS, | ||
code: colorPaletteSource, | ||
}, { | ||
type: GuideSectionTypes.HTML, | ||
code: colorPaletteHtml, | ||
}], | ||
text: ( | ||
<p> | ||
Use the <EuiCode>colorPalette</EuiCode> service to obtain an array of | ||
hexidecimal color codes for a given palette such as | ||
<EuiCode>colorPalette('color_blind')</EuiCode>, then apply them to UI | ||
elements such as charts. | ||
</p> | ||
), | ||
demo: <ColorPalette />, | ||
}, { | ||
title: 'Custom color palettes', | ||
source: [{ | ||
type: GuideSectionTypes.JS, | ||
code: colorPaletteCustomSource, | ||
}, { | ||
type: GuideSectionTypes.HTML, | ||
code: colorPaletteCustomHtml, | ||
}], | ||
text: ( | ||
<p> | ||
Generate a custom palette of any length from two hexidecimal color | ||
codes such as | ||
<EuiCode>colorPalette('custom', 'FF0000', '#00FFFF', 25)</EuiCode>. | ||
</p> | ||
), | ||
demo: <ColorPaletteCustom />, | ||
}, { | ||
title: 'Chart example', | ||
source: [{ | ||
type: GuideSectionTypes.JS, | ||
code: colorPaletteHistogramSource, | ||
}, { | ||
type: GuideSectionTypes.HTML, | ||
code: colorPaletteHistogramHtml, | ||
}], | ||
text: ( | ||
<p> | ||
Apply the results of <EuiCode>colorPalette</EuiCode> to the | ||
<EuiCode>color</EuiCode> prop of EUI chart components. | ||
</p> | ||
), | ||
demo: <ColorPaletteHistogram />, | ||
}], | ||
}; |
56 changes: 56 additions & 0 deletions
56
src-docs/src/views/color_palette/color_palette_histogram.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import React, { Component, Fragment } from 'react'; | ||
|
||
import { | ||
EuiSeriesChart, | ||
EuiHistogramSeries, | ||
EuiSeriesChartUtils, | ||
} from '../../../../src/experimental'; | ||
import { | ||
colorPalette, | ||
} from '../../../../src/services/color/color_palette'; | ||
|
||
const { SCALE } = EuiSeriesChartUtils; | ||
const timestamp = Date.now(); | ||
const ONE_HOUR = 3600000; | ||
const margins = { | ||
top: 10, | ||
left: 80, | ||
right: 0, | ||
bottom: 20, | ||
}; | ||
const colors = colorPalette('custom', 'FF0000', '#00FFFF', 6); | ||
|
||
function randomizeData(size = 24, max = 8) { | ||
return new Array(size) | ||
.fill(0) | ||
.map((d, i) => ({ | ||
x0: ONE_HOUR * i, | ||
x: ONE_HOUR * (i + 1), | ||
y: Math.floor(Math.random() * max), | ||
})) | ||
.map(el => ({ | ||
x0: el.x0 + timestamp, | ||
x: el.x + timestamp, | ||
y: el.y, | ||
})); | ||
} | ||
function buildData(series) { | ||
const max = Math.ceil(Math.random() * 1000000); | ||
return new Array(series).fill(0).map(() => randomizeData(20, max)); | ||
} | ||
export default class Example extends Component { | ||
state = { | ||
series: 6, | ||
data: buildData(6), | ||
}; | ||
render() { | ||
const { data } = this.state; | ||
return ( | ||
<Fragment> | ||
<EuiSeriesChart width={600} height={200} xType={SCALE.TIME} stackBy="y" margins={margins}> | ||
{data.map((d, i) => <EuiHistogramSeries key={i} name={`Chart ${i}`} data={d} color={colors[i]} />)} | ||
</EuiSeriesChart> | ||
</Fragment> | ||
); | ||
} | ||
} |
Oops, something went wrong.