Skip to content
This repository has been archived by the owner on Jun 5, 2023. It is now read-only.

Commit

Permalink
feat: Add empty state to SimpleGauge
Browse files Browse the repository at this point in the history
diondiondion committed Aug 21, 2019
1 parent bd5b9f3 commit 96e36c7
Showing 3 changed files with 91 additions and 8 deletions.
4 changes: 3 additions & 1 deletion src/charts/README.mdx
Original file line number Diff line number Diff line change
@@ -34,7 +34,7 @@ You can also provide a `name` prop for the tooltip value and an array of `labels
color="highlight"
/>
<br />
<SimpleChart isEmpty height={125} color="highlight" />
<SimpleChart isEmpty height={125} color="positive" />
</Playground>

## SimpleGauge
@@ -45,4 +45,6 @@ Takes a single `value` prop that must be a Number value between `0` and `1` whic
<SimpleGauge value={0.3} height={125} />
<br />
<SimpleGauge value={0.8} height={80} color="positive" />
<br />
<SimpleGauge isEmpty height={80} color="negative" />
</Playground>
46 changes: 46 additions & 0 deletions src/charts/SimpleGauge/StripesPattern.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from 'react';
import styled from 'styled-components';
import {getColorBlock} from '../../utils/colors';

const Wrapper = styled.div`
height: 0;
color: ${p => getColorBlock(p.color, p.theme)};
`;

function StripesPattern({id, color}) {
return (
<Wrapper color={color}>
<svg
width="0"
height="0"
viewBox="0 0 20 20"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<defs>
<pattern
id={id}
patternUnits="userSpaceOnUse"
width="20"
height="20"
>
<g
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<g fill="currentColor">
<polygon points="0 20 20 0 10 0 0 10" />
<polygon points="20 20 20 10 10 20" />
</g>
</g>
</pattern>
</defs>
</svg>
</Wrapper>
);
}

export default StripesPattern;
49 changes: 42 additions & 7 deletions src/charts/SimpleGauge/index.js
Original file line number Diff line number Diff line change
@@ -4,46 +4,65 @@ import styled, {css} from 'styled-components';
import {pxToRem} from '../../utils/units';
import {getColorBlock} from '../../utils/colors';

import CenterContent from '../../CenterContent';

import useChartist from '../useChartist';
import StripesPattern from './StripesPattern';

const Wrapper = styled.div`
position: relative;
overflow: hidden;
${p =>
p.height &&
css`
height: ${pxToRem(p.height)};
`}
color: ${p => getColorBlock(p.color, p.theme)};
> svg {
vertical-align: middle;
color: ${p => getColorBlock(p.color, p.theme)};
${p =>
p.patternId &&
`
opacity: 0.2;
`}
}
.ct-slice-donut {
stroke: none;
fill: none;
}
.ct-series-a {
stroke: currentColor;
fill: ${p =>
p.patternId ? `url(#${p.patternId}) currentColor` : 'currentColor'};
}
.ct-series-b {
stroke: currentColor;
fill: currentColor;
opacity: 0.2;
}
`;

const defaultOptions = {
donut: true,
donutWidth: '80%',
donutSolid: true,
startAngle: 270,
total: 200,
showLabel: false,
chartPadding: 0,
};

function SimpleGauge({value, height, color = 'links'}) {
function SimpleGauge({
value,
height,
color = 'links',
isEmpty,
emptyContent = 'No data to display',
}) {
const hostRef = useRef(null);

const fraction = value * 100;
const hasValue = typeof value !== 'undefined' && value !== null && !isEmpty;

const fraction = (hasValue ? value : Math.random()) * 100;

const options = {
...defaultOptions,
@@ -58,7 +77,23 @@ function SimpleGauge({value, height, color = 'links'}) {
options,
});

return <Wrapper ref={hostRef} height={height} color={color} />;
const patternId = `gauge-chart-${Math.random()}`;

return (
<Wrapper
ref={hostRef}
height={height}
color={color}
patternId={hasValue ? null : patternId}
>
{!hasValue && (
<CenterContent fillParent spacing="0">
{emptyContent}
<StripesPattern color={color} id={patternId} />
</CenterContent>
)}
</Wrapper>
);
}

export default SimpleGauge;

0 comments on commit 96e36c7

Please sign in to comment.