recharts#YAxis TypeScript Examples
The following examples show how to use
recharts#YAxis.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: SimpleLineChart.tsx From react-tutorials with MIT License | 7 votes |
|
SimpleLineChart = (props: ISimpleLineChartProps) => {
return (
<>
<LineChart
width={500}
height={300}
data={props.data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
height={60}
dataKey="date"
// @ts-ignore
tick={<CustomizedAxisTick />}
/>
<YAxis
// @ts-ignore
tick={<CustomizedYAxisTick />}
/>
<Tooltip />
<Line type="monotone" dataKey="value" stroke="#8884d8" dot={<EmptyDot />} />
</LineChart>
</>
)
}
Example #2
| Source File: BarChart.tsx From opensaas with MIT License | 6 votes |
|
BarChart: React.FC<BarChartProps> = (props) => {
const { width, height, data, barSize, barCategoryGap, showGrid, showLegend, colors } = props;
return (
<ResponsiveContainer>
<RechartsBarChart
width={width}
height={height}
data={data}
barSize={barSize}
barCategoryGap={barCategoryGap}
margin={{
top: 5,
right: 30,
left: 10,
bottom: 5,
}}>
{showGrid ? <CartesianGrid strokeDasharray='3 3' /> : null}
<XAxis dataKey='name' axisLine={false} tickLine={false} />
<YAxis axisLine={false} tickLine={false} />
<Tooltip cursor={false} />
{showLegend ? <Legend /> : null}
{Object.keys(data[0]).map((key: string, index: number) => {
return key !== 'name' ? <Bar dataKey={key} key={key} fill={colors[(index - 1) % colors.length]} /> : null;
})}
</RechartsBarChart>
</ResponsiveContainer>
);
}
Example #3
| Source File: RegionDailyCasesChart.tsx From covid19map with MIT License | 6 votes |
|
RegionDailyCasesChart = ({ history }: { history: any }) => {
const theme = useTheme();
return (
<StyledRegionDailyCasesChart>
<h3>Daily Cases</h3>
<div className="chart-wrap">
<ResponsiveContainer>
<LineChart
data={history}
margin={{ left: -30, right: 10, bottom: 20 }}
>
<XAxis
dataKey="date"
label={{
fontSize: 12,
value: "Days since first case detected",
position: "bottom",
}}
tickFormatter={(tick) =>
history.findIndex((x: any) => x.date === tick)
}
/>
<YAxis />
<Line
type="monotone"
dataKey="new"
stroke={theme.teal}
strokeWidth={1}
dot={false}
isAnimationActive={false}
/>
</LineChart>
</ResponsiveContainer>
</div>
</StyledRegionDailyCasesChart>
);
}
Example #4
| Source File: ChartCard.tsx From genshin-optimizer with MIT License | 6 votes |
|
function Chart({ displayData, plotNode, valueNode, showMin }: {
displayData: Point[],
plotNode: NumNode,
valueNode: NumNode,
showMin: boolean
}) {
const plotBaseUnit = KeyMap.unit(plotNode.info?.key)
const valueUnit = KeyMap.unit(valueNode.info?.key)
return <ResponsiveContainer width="100%" height={600}>
<ComposedChart data={displayData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="x" scale="linear" unit={plotBaseUnit} domain={["auto", "auto"]} tick={{ fill: 'white' }} type="number" tickFormatter={n => n > 10000 ? n.toFixed() : n.toFixed(1)} />
<YAxis name="DMG" domain={["auto", "auto"]} unit={valueUnit} allowDecimals={false} tick={{ fill: 'white' }} type="number" />
<ZAxis dataKey="y" range={[3, 25]} />
<Legend />
<Scatter name="Optimization Target" dataKey="y" fill="#8884d8" line lineType="fitting" isAnimationActive={false} />
{showMin && <Line name="Minimum Stat Requirement Threshold" dataKey="min" stroke="#ff7300" type="stepBefore" connectNulls strokeWidth={2} isAnimationActive={false} />}
</ComposedChart>
</ResponsiveContainer>
}
Example #5
| Source File: Ages.tsx From covid19map with MIT License | 6 votes |
|
Ages = ({ ages }: any) => {
const theme = useTheme();
return (
<StyledAges>
<div className="head">Cases by Age</div>
<div className="chart-wrap">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={ages}
layout="vertical"
margin={{
top: 10,
right: 0,
left: 0,
bottom: 10,
}}
// @ts-ignore
isAnimationActive={false}
>
<XAxis type="number" hide />
<YAxis type="category" dataKey="group" interval={0} width={90} />
<Bar dataKey="active" fill={theme.teal} stackId="a" />
<Bar dataKey="recovered" fill={theme.green} stackId="a" />
<Bar dataKey="deaths" fill={theme.navy} stackId="a" />
</BarChart>
</ResponsiveContainer>
</div>
<ChartLegend
items={[
{ title: "Active", color: theme.teal },
{ title: "Recovered", color: theme.green },
{ title: "Deaths", color: theme.navy },
]}
/>
</StyledAges>
);
}
Example #6
| Source File: DailyStatsChart.tsx From asynqmon with MIT License | 6 votes |
|
export default function DailyStatsChart(props: Props) {
const data = makeChartData(props.data, props.numDays);
const theme = useTheme<Theme>();
return (
<ResponsiveContainer>
<LineChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey="date"
minTickGap={10}
stroke={theme.palette.text.secondary}
/>
<YAxis stroke={theme.palette.text.secondary} />
<Tooltip />
<Legend />
<Line
type="monotone"
dataKey="succeeded"
stroke={theme.palette.success.main}
/>
<Line
type="monotone"
dataKey="failed"
stroke={theme.palette.error.main}
/>
</LineChart>
</ResponsiveContainer>
);
}
Example #7
| Source File: TrafficChart.tsx From web-show with Apache License 2.0 | 6 votes |
|
TrafficChart: React.FC<IProps> = props => {
const { data } = props;
return (
<ResponsiveContainer>
<ComposedChart
barGap="2%"
width={600}
height={400}
margin={{
top: 10,
right: 30,
left: 20,
bottom: 20
}}
data={data}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
tickLine={false}
dataKey="time"
domain = {['auto', 'auto']}
tickFormatter = {(unixTime) => moment(unixTime).format('HH:mm:ss Do')}
type = 'number'
/>
<YAxis label={{ value: 'Latency', position: 'insideLeft', angle: -90 }} unit={"ms"}/>
<Tooltip labelFormatter={t => new Date(t).toLocaleString()} />
<Legend />
<Line type="monotone" dataKey="latency" stroke="#8884d8" />
</ComposedChart>
</ResponsiveContainer>
);
}
Example #8
| Source File: BuildTimeline.tsx From backstage with Apache License 2.0 | 6 votes |
|
BuildTimeline = ({
targets,
height,
width,
}: BuildTimelineProps) => {
const theme = useTheme();
if (!targets.length) return <p>No Targets</p>;
const data = getTimelineData(targets);
return (
<ResponsiveContainer
height={height}
width={width}
minHeight={EMPTY_HEIGHT + targets.length * 5}
>
<BarChart layout="vertical" data={data} maxBarSize={10} barGap={0}>
<CartesianGrid strokeDasharray="2 2" />
<XAxis type="number" domain={[0, 'dataMax']} />
<YAxis type="category" dataKey="name" padding={{ top: 0, bottom: 0 }} />
<Tooltip content={<TargetToolTip />} />
<Legend />
<Bar
dataKey="buildTime"
fill={theme.palette.grey[400]}
minPointSize={1}
/>
<Bar dataKey="compileTime" fill={theme.palette.primary.main} />
</BarChart>
</ResponsiveContainer>
);
}
Example #9
| Source File: ProcessedTasksChart.tsx From asynqmon with MIT License | 6 votes |
|
function ProcessedTasksChart(props: Props) {
const theme = useTheme<Theme>();
return (
<ResponsiveContainer>
<BarChart data={props.data} maxBarSize={120}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="queue" stroke={theme.palette.text.secondary} />
<YAxis stroke={theme.palette.text.secondary} />
<Tooltip />
<Legend />
<Bar
dataKey="succeeded"
stackId="a"
fill={theme.palette.success.light}
/>
<Bar dataKey="failed" stackId="a" fill={theme.palette.error.light} />
</BarChart>
</ResponsiveContainer>
);
}
Example #10
| Source File: Debug.tsx From watchparty with MIT License | 6 votes |
|
Debug = () => {
const [data, setData] = useState([]);
// eslint-disable-next-line
useEffect(
(async () => {
const response = await fetch(timeSeriesUrl);
const json = await response.json();
json.reverse();
setData(json);
}) as any,
[setData]
);
const keys = Object.keys(data.slice(-1)[0] ?? {});
return (
<>
{keys.map((key) => (
<LineChart
width={1400}
height={400}
data={data}
margin={{
top: 5,
left: 20,
bottom: 5,
}}
>
<CartesianGrid />
<XAxis dataKey="time" />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" dataKey={key} stroke="#8884d8" />
</LineChart>
))}
</>
);
}
Example #11
| Source File: Line.tsx From your_spotify with GNU General Public License v3.0 | 6 votes |
|
export default function Line<
D extends { x: number; y: number; dateWithPrecision: DateWithPrecision },
>({ data, xFormat, yFormat, tooltipLabelFormatter, tooltipValueFormatter }: LineProps<D>) {
const internTooltipLabelFormatter = useRawTooltipLabelFormatter(tooltipLabelFormatter);
const internTooltipValueFormatter = useRawTooltipValueFormatter(tooltipValueFormatter);
return (
<ResponsiveContainer width="100%" height="100%">
<LineChart data={data}>
<RLine
connectNulls
type="monotone"
dataKey="y"
fill="var(--primary)"
stroke="var(--primary)"
strokeWidth={2}
dot={false}
/>
<XAxis
name="X"
domain={['dataMin', 'dataMax']}
dataKey="x"
tickFormatter={xFormat}
style={{ fontWeight: 'bold' }}
/>
<YAxis domain={['dataMin', 'dataMax']} tickFormatter={yFormat} />
<Tooltip
wrapperStyle={{ zIndex: 10 }}
contentStyle={{ backgroundColor: 'var(--background)' }}
labelStyle={{ color: 'var(--text-on-light)' }}
labelFormatter={internTooltipLabelFormatter}
formatter={internTooltipValueFormatter}
/>
</LineChart>
</ResponsiveContainer>
);
}
Example #12
| Source File: index.tsx From Demae with MIT License | 6 votes |
|
OrderChart = () => {
return (
<LineChart
width={500}
height={300}
data={data}
margin={{
top: 5, right: 30, left: 20, bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
);
}
Example #13
| Source File: DailyIncidents.tsx From backstage-plugin-opsgenie with MIT License | 6 votes |
|
Graph = ({context}: {context: Context}) => {
const analyticsApi = useApi(analyticsApiRef);
const dataPoints = analyticsApi.incidentsByDay(context);
return (
<div id="daily-incidents" style={{ width: '100%', height: 300, paddingTop: '1.2rem', paddingRight: '1.2rem' }}>
<ResponsiveContainer>
<ScatterChart data={dataPoints}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="day" name="Day" />
<YAxis dataKey="total" name="Total" />
<Tooltip content={<FilterZeroTooltip />} />
<Scatter name="day" data={dataPoints} fill="#8884d8" />
</ScatterChart>
</ResponsiveContainer>
</div>
);
}
Example #14
| Source File: Bar.tsx From your_spotify with GNU General Public License v3.0 | 6 votes |
|
export default function Bar({
data,
xFormat,
yFormat,
tooltipLabelFormatter,
tooltipValueFormatter,
customXTick,
}: BarProps) {
const realFormatter = useMemo(() => {
if (tooltipValueFormatter) {
return (...args: any[]) => [tooltipValueFormatter(...args), null];
}
return undefined;
}, [tooltipValueFormatter]);
return (
<ResponsiveContainer width="100%" height="100%">
<BarChart data={data}>
<XAxis
dataKey="x"
tickFormatter={xFormat}
tick={customXTick}
style={{ fontWeight: 'bold' }}
/>
<YAxis dataKey="y" tickFormatter={yFormat} width={40} />
<RBar dataKey="y" fill="var(--primary)" />
<Tooltip
wrapperStyle={{ zIndex: 10 }}
contentStyle={{ backgroundColor: 'var(--background)' }}
labelStyle={{ color: 'var(--text-on-light)' }}
labelFormatter={tooltipLabelFormatter}
formatter={realFormatter}
/>
</BarChart>
</ResponsiveContainer>
);
}
Example #15
| Source File: WeeklyIncidentsSeverity.tsx From backstage-plugin-opsgenie with MIT License | 6 votes |
|
Graph = ({context}: {context: Context}) => {
const analyticsApi = useApi(analyticsApiRef);
const dataPoints = analyticsApi.incidentsByWeekAndSeverity(context);
return (
<div id="weekly-incidents-severity" style={{ width: '100%', height: 300, paddingTop: '1.2rem', paddingRight: '1.2rem' }}>
<ResponsiveContainer>
<ComposedChart data={dataPoints}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="week" />
<YAxis />
<Bar dataKey="p1" fill="#bf2600" name="P1 - Critical" stackId="a" barSize={30} />
<Bar dataKey="p2" fill="#ff7452" name="P2 - High" stackId="a" barSize={30} />
<Bar dataKey="p3" fill="#ffab00" name="P3 - Moderate" stackId="a" barSize={30} />
<Bar dataKey="p4" fill="#36b37e" name="P4 - Low" stackId="a" barSize={30} />
<Bar dataKey="p5" fill="#00857A" name="P5 - Informational" stackId="a" barSize={30} />
<Tooltip content={<FilterZeroTooltip />} />
<Legend />
</ComposedChart>
</ResponsiveContainer>
</div>
);
}
Example #16
| Source File: index.tsx From vvs-ui with GNU General Public License v3.0 | 5 votes |
|
Chart = ({ data, setHoverValue, setHoverDate }: LineChartProps) => {
const { theme } = useTheme()
if (!data || data.length === 0) {
return <BarChartLoader />
}
return (
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={data}
margin={{
top: 5,
right: 15,
left: 0,
bottom: 5,
}}
onMouseLeave={() => {
setHoverDate(undefined)
setHoverValue(undefined)
}}
>
<XAxis
dataKey="time"
axisLine={false}
tickLine={false}
tickFormatter={(time) => format(time, 'dd')}
minTickGap={10}
/>
<YAxis
dataKey="value"
tickCount={6}
scale="linear"
axisLine={false}
tickLine={false}
color={theme.colors.textSubtle}
fontSize="12px"
tickFormatter={(val) => `$${formatAmount(val)}`}
orientation="right"
tick={{ dx: 10, fill: theme.colors.textSubtle }}
/>
<Tooltip
cursor={{ fill: theme.colors.backgroundDisabled }}
contentStyle={{ display: 'none' }}
formatter={(tooltipValue, name, props) => (
<HoverUpdater payload={props.payload} setHoverValue={setHoverValue} setHoverDate={setHoverDate} />
)}
/>
<Bar
dataKey="value"
fill={theme.colors.primary}
shape={(props) => (
<CustomBar height={props.height} width={props.width} x={props.x} y={props.y} fill={theme.colors.primary} />
)}
/>
</BarChart>
</ResponsiveContainer>
)
}
Example #17
| Source File: index.tsx From glide-frontend with GNU General Public License v3.0 | 5 votes |
|
Chart = ({ data, setHoverValue, setHoverDate }: LineChartProps) => {
const { theme } = useTheme()
if (!data || data.length === 0) {
return <BarChartLoader />
}
return (
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={data}
margin={{
top: 5,
right: 15,
left: 0,
bottom: 5,
}}
onMouseLeave={() => {
setHoverDate(undefined)
setHoverValue(undefined)
}}
>
<XAxis
dataKey="time"
axisLine={false}
tickLine={false}
tickFormatter={(time) => format(time, 'dd')}
minTickGap={10}
/>
<YAxis
dataKey="value"
tickCount={6}
scale="linear"
axisLine={false}
tickLine={false}
color={theme.colors.textSubtle}
fontSize="12px"
tickFormatter={(val) => `$${formatAmount(val)}`}
orientation="right"
tick={{ dx: 10, fill: theme.colors.textSubtle }}
/>
<Tooltip
cursor={{ fill: theme.colors.backgroundDisabled }}
contentStyle={{ display: 'none' }}
formatter={(tooltipValue, name, props) => (
<HoverUpdater payload={props.payload} setHoverValue={setHoverValue} setHoverDate={setHoverDate} />
)}
/>
<Bar
dataKey="value"
fill={theme.colors.primary}
shape={(props) => (
<CustomBar height={props.height} width={props.width} x={props.x} y={props.y} fill={theme.colors.primary} />
)}
/>
</BarChart>
</ResponsiveContainer>
)
}
Example #18
| Source File: stats.tsx From config-generator with MIT License | 5 votes |
|
public render() {
const { stats, onRefresh, range } = this.props;
const { strokeWidth } = this.state;
return (
<ResponsiveContainer width="100%" maxHeight={500} aspect={4.0 / 3.0}>
<LineChart
data={stats}
margin={{
top: 25,
right: 30,
left: 20,
bottom: 100,
}}
>
<CartesianGrid strokeDasharray="1 4" />
<XAxis
dataKey="timeStamp"
tick={this.renderCustomAxisTick}
interval={0}
ticks={stats.map((s: any) => s.timeStamp)}
type="number"
domain={['dataMin', 'dataMax']}
/>
<YAxis />
<Tooltip
itemStyle={{ textTransform: 'capitalize' }}
labelFormatter={value =>
range === 'day'
? moment(value).format('DD/MM/YYYY HH:mm:ss')
: moment(value).format('DD/MM/YYYY')
}
labelStyle={{ fontWeight: 'bold', marginBottom: '10px' }}
/>
<Legend
verticalAlign="top"
iconType="circle"
formatter={(value, entry, index) => value.toUpperCase()}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/>
<Line
type="monotone"
dataKey="all"
connectNulls={true}
stroke="#4F4F4F"
activeDot={{ r: 8 }}
strokeWidth={strokeWidth.all}
/>
<Line
type="monotone"
dataKey="allowed"
stroke="#71ADFE"
connectNulls={true}
activeDot={{ r: 8 }}
strokeWidth={strokeWidth.allowed}
/>
<Line
type="monotone"
connectNulls={true}
dataKey="blocked"
stroke="#EB5757"
activeDot={{ r: 8 }}
strokeWidth={strokeWidth.blocked}
/>
</LineChart>
</ResponsiveContainer>
);
}
Example #19
| Source File: WithdrawGraph.tsx From mStable-apps with GNU Lesser General Public License v3.0 | 5 votes |
|
WithdrawGraph: FC = () => {
const { data } = useStakedTokenQuery() ?? {}
const weightedTimestamp = data?.stakedToken?.accounts?.[0]?.balance?.weightedTimestamp ?? nowUnix
const graphData = useMemo(() => {
const weeksStaked = (nowUnix - weightedTimestamp) / WEEK
const data = generateData(weeksStaked)
const ticks = [...new Set(data.map(d => d.week))]
return { data, ticks }
}, [weightedTimestamp])
return (
<Container>
<ResponsiveContainer width="100%" aspect={1.75}>
<AreaChart data={graphData.data}>
<defs>
<linearGradient id="area" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={Color.blue} stopOpacity={0.5} />
<stop offset="95%" stopColor={Color.blue} stopOpacity={0} />
</linearGradient>
</defs>
<XAxis
dataKey="week"
tickFormatter={w => `${w / WEEK}`}
axisLine={false}
padding={{ left: 16 }}
tickLine={false}
ticks={graphData.ticks}
/>
<YAxis tickCount={2} tickFormatter={m => `${m}%`} axisLine={false} padding={{ bottom: 16 }} tickLine={false} width={24} />
<Tooltip
cursor
labelFormatter={week => `+${(week as number) / WEEK} weeks`}
formatter={fee => `${(fee as number).toFixed(4)}%`}
separator=""
contentStyle={{
fontSize: '14px',
padding: '8px',
background: 'rgba(255, 255, 255, 0.8)',
textAlign: 'right',
border: 'none',
borderRadius: '4px',
color: Color.black,
}}
wrapperStyle={{
top: 0,
left: 0,
}}
/>
<Area type="monotone" name={'Fee: '} dataKey="fee" stroke={Color.blue} strokeWidth={2} fill="url(#area)" />
</AreaChart>
</ResponsiveContainer>
</Container>
)
}
Example #20
| Source File: QueueMetricsChart.tsx From asynqmon with MIT License | 5 votes |
|
function QueueMetricsChart(props: Props) {
const theme = useTheme();
const data = toChartData(props.data);
const keys = props.data.map((x) => x.metric.queue);
return (
<ResponsiveContainer height={260}>
<LineChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
minTickGap={10}
dataKey="timestamp"
domain={[props.startTime, props.endTime]}
tickFormatter={(timestamp: number) =>
new Date(timestamp * 1000).toLocaleTimeString()
}
type="number"
scale="time"
stroke={theme.palette.text.secondary}
/>
<YAxis
tickFormatter={props.yAxisTickFormatter}
stroke={theme.palette.text.secondary}
/>
<Tooltip
labelFormatter={(timestamp: number) => {
return new Date(timestamp * 1000).toLocaleTimeString();
}}
/>
<Legend />
{keys.map((key, idx) => (
<Line
key={key}
type="monotone"
dataKey={key}
stroke={lineColors[idx % lineColors.length]}
dot={false}
/>
))}
</LineChart>
</ResponsiveContainer>
);
}
Example #21
| Source File: StakeGraph.tsx From mStable-apps with GNU Lesser General Public License v3.0 | 5 votes |
|
StakeGraph: FC = () => {
const { data: tokenData } = useStakedTokenQuery()
const weightedTimestamp = tokenData?.stakedToken?.accounts?.[0]?.balance?.weightedTimestamp
const data = generateData(weightedTimestamp)
const ticks = removeDuplicatesBy(x => x.multiplier, data).map(v => v.week)
return (
<Container>
<ResponsiveContainer width="100%" aspect={1.75}>
<AreaChart data={data}>
<defs>
<linearGradient id="area" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={Color.blue} stopOpacity={0.5} />
<stop offset="95%" stopColor={Color.blue} stopOpacity={0} />
</linearGradient>
</defs>
<XAxis dataKey="week" tickFormatter={w => `${w / WEEK}`} axisLine={false} padding={{ left: 16 }} tickLine={false} ticks={ticks} />
<YAxis
domain={['dataMin', 'dataMax']}
tickCount={4}
tickFormatter={m => `${m}x`}
axisLine={false}
padding={{ bottom: 16 }}
tickLine={false}
width={32}
/>
<Tooltip
cursor
labelFormatter={week => `+${(week as number) / WEEK} weeks`}
formatter={multiplier => multiplier}
separator=""
contentStyle={{
fontSize: '14px',
padding: '8px',
background: 'rgba(255, 255, 255, 0.8)',
textAlign: 'right',
border: 'none',
borderRadius: '4px',
color: Color.black,
}}
wrapperStyle={{
top: 0,
left: 0,
}}
/>
<Area type="stepAfter" name={`multiplier: `} dataKey="multiplier" stroke={Color.blue} strokeWidth={2} fill="url(#area)" />
</AreaChart>
</ResponsiveContainer>
</Container>
)
}
Example #22
| Source File: StatisticsChart.tsx From jitsu with MIT License | 5 votes |
|
StatisticsChart: React.FC<Props> = ({
data,
granularity,
dataToDisplay = ["success", "skip", "errors"],
legendLabels = {},
}) => {
const [state, dispatch] = useReducer(reducer, initialState)
const handleClickOnLegend = (data: any) => {
const clickedDataType = data["value"] as DataType
dispatch({ type: clickedDataType })
}
return (
<ResponsiveContainer width="100%" minHeight={225} minWidth={300}>
<LineChart
className={styles.chart}
data={data.map(point => ({
...point,
date: granularity == "hour" ? point.date.format("HH:mm") : point.date.format("DD MMM"),
}))}
>
<XAxis dataKey="date" tick={<CustomizedXAxisTick />} stroke="#394e5a" />
<YAxis tick={<CustomizedYAxisTick />} stroke="#394e5a" />
<CartesianGrid strokeDasharray="3 3" stroke="#394e5a" />
<Legend onClick={handleClickOnLegend} formatter={value => legendLabels[value] ?? value} />
<Tooltip
wrapperStyle={{
backgroundColor: "#22313a",
border: "1px solid #394e5a",
}}
itemStyle={{ color: "#9bbcd1" }}
labelStyle={{ color: "#dcf3ff" }}
formatter={value => new Intl.NumberFormat("en").format(value)}
/>
{dataToDisplay.includes("total") && (
<Line dataKey="total" stroke={"rgb(135, 138, 252)"} hide={state.hide_total_data} {...commonLineProps} />
)}
{dataToDisplay.includes("success") && (
<Line dataKey="success" stroke={"#2cc56f"} hide={state.hide_success_data} {...commonLineProps} />
)}
{dataToDisplay.includes("skip") && (
<Line dataKey="skip" stroke={"#ffc021"} hide={state.hide_skip_data} {...commonLineProps} />
)}
{dataToDisplay.includes("errors") && (
<Line dataKey="errors" stroke={"#e53935"} hide={state.hide_errors_data} {...commonLineProps} />
)}
</LineChart>
</ResponsiveContainer>
)
}
Example #23
| Source File: ChartTraces.tsx From kubenav with MIT License | 5 votes |
|
ChartTraces: React.FunctionComponent<IChartTracesProps> = ({ traces }: IChartTracesProps) => {
const context = useContext<IContext>(AppContext);
const data: IData[] = [];
for (const trace of traces) {
if (trace.spans.length > 0) {
data.push({
name: traceTitle(trace),
time: Math.floor(trace.spans[0].startTime / 1000),
duration: getDuration(trace.spans),
spans: trace.spans.length,
});
}
}
const formatTime = (time: number): string => {
const d = new Date(time);
return `${('0' + d.getHours()).slice(-2)}:${('0' + d.getMinutes()).slice(-2)}:${('0' + d.getSeconds()).slice(
-2,
)}.${('0' + d.getMilliseconds()).slice(-3)}`;
};
return (
<IonRow style={{ height: '200px', width: '100%' }}>
<IonCol style={{ padding: '0px' }}>
<ResponsiveContainer>
<ScatterChart>
<XAxis
dataKey="time"
scale="time"
type="number"
name="Time"
domain={['dataMin', 'dataMax']}
tickFormatter={formatTime}
/>
<YAxis type="number" name="Duration" dataKey="duration" unit="ms" />
<ZAxis type="number" name="Spans" dataKey="spans" range={[100, 1000]} />
{!isPlatform('hybrid') ? (
<Tooltip
cursor={{ stroke: '#949494', strokeWidth: 2 }}
contentStyle={
isDarkMode(context.settings.theme)
? isPlatform('ios')
? { backgroundColor: '1c1c1c', borderColor: '#949494' }
: { backgroundColor: '#1A1B1E', borderColor: '#949494' }
: { backgroundColor: '#ffffff', borderColor: '#949494' }
}
content={<CustomTooltipContent />}
formatter={(value, name) => {
if (name === 'Name') {
return [value];
} else if (name === 'Time') {
return [formatTime(value), 'Time'];
} else {
return [value, name];
}
}}
/>
) : null}
<Scatter data={data} stroke="#326ce5" fill="#326ce5" shape="circle" />
</ScatterChart>
</ResponsiveContainer>
</IonCol>
</IonRow>
);
}
Example #24
| Source File: OrderChart.tsx From ra-enterprise-demo with MIT License | 5 votes |
|
OrderChart: FC<{ orders?: Order[] }> = ({ orders }) => {
const translate = useTranslate();
if (!orders) return null;
return (
<Card>
<CardHeader title={translate('pos.dashboard.month_history')} />
<CardContent>
<div style={{ width: '100%', height: 300 }}>
<ResponsiveContainer>
<AreaChart data={getRevenuePerDay(orders)}>
<defs>
<linearGradient
id="colorUv"
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop
offset="5%"
stopColor="#8884d8"
stopOpacity={0.8}
/>
<stop
offset="95%"
stopColor="#8884d8"
stopOpacity={0}
/>
</linearGradient>
</defs>
<XAxis
dataKey="date"
name="Date"
type="number"
scale="time"
domain={[
addDays(aMonthAgo, 1).getTime(),
new Date().getTime(),
]}
tickFormatter={dateFormatter}
/>
<YAxis dataKey="total" name="Revenue" unit="€" />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip
cursor={{ strokeDasharray: '3 3' }}
formatter={(value): string =>
new Intl.NumberFormat(undefined, {
style: 'currency',
currency: 'USD',
}).format(value as any)
}
labelFormatter={(label: any): string =>
dateFormatter(label)
}
/>
<Area
type="monotone"
dataKey="total"
stroke="#8884d8"
strokeWidth={2}
fill="url(#colorUv)"
/>
</AreaChart>
</ResponsiveContainer>
</div>
</CardContent>
</Card>
);
}
Example #25
| Source File: DistributionBar.tsx From mStable-apps with GNU Lesser General Public License v3.0 | 5 votes |
|
DistributionBar: FC = () => {
const [epochData] = useEpochData()
const [, setSelectedDialId] = useSelectedDialId()
const [, setHoveredDialId] = useHoveredDialId()
const scaledDialVotes = useScaledDialVotes(epochData?.dialVotes)
return (
<Container>
<Inner>
<Header>
<div>
<h4>
<span>Distribution</span>
</h4>
</div>
<div>
<CountUp end={epochData?.emission} decimals={0} duration={0.3} />
<StyledTokenIcon symbol="MTA" />
</div>
</Header>
<ResponsiveContainer height={24} width="100%">
<BarChart layout="vertical" stackOffset="none" data={scaledDialVotes} margin={{ top: 0, bottom: 0, left: 0, right: 0 }}>
<XAxis hide type="number" />
<YAxis hide type="category" />
{Object.values(epochData?.dialVotes ?? {})
.filter(dialVote => dialVote.votes > 0)
.map(({ dialId }, idx, arr) => (
<Bar
key={dialId}
dataKey={dialId}
fill={DIALS_METADATA[dialId].color}
stackId="bar"
radius={renderRadius(idx, arr.length)}
onClick={() => {
setSelectedDialId(dialId)
}}
onMouseEnter={() => {
setHoveredDialId(dialId)
}}
onMouseLeave={() => {
setHoveredDialId(undefined)
}}
/>
))}
</BarChart>
</ResponsiveContainer>
<ActiveDial />
</Inner>
</Container>
)
}
Example #26
| Source File: TotalChart.tsx From covid19map with MIT License | 5 votes |
|
TotalChart = ({ summary }: { summary: any }) => {
const theme = useTheme();
return (
<Chart>
<div className="head">Total cases</div>
<div className="chart-wrap">
<ResponsiveContainer>
<LineChart
data={summary}
margin={{ left: -30, right: 10, bottom: 20 }}
>
<XAxis
dataKey="date"
label={{
fill: theme.navy,
fontSize: 12,
value: "Days since first case detected",
position: "bottom",
}}
tickFormatter={(tick) =>
summary.findIndex((x: any) => x.date === tick)
}
/>
<YAxis />
<Line
type="monotone"
dataKey="recoveredTotal"
stroke={theme.green}
strokeWidth={4}
dot={false}
/>
<Line
type="monotone"
dataKey="combinedTotal"
stroke={theme.teal}
strokeWidth={4}
dot={false}
/>
{/* <Line
type="monotone"
dataKey="deathsTotal"
stroke="red"
strokeWidth={2}
dot={false}
/> */}
<ReferenceLine x="2020-03-25T00:00:00.000Z" stroke="#025064" />
</LineChart>
</ResponsiveContainer>
<ChartLegend
items={[
{ title: "Total", color: theme.teal },
{ title: "Recovered", color: theme.green },
// { title: "Lv4 lockdown", color: theme.navy },
]}
/>
</div>
</Chart>
);
}
Example #27
| Source File: StackedBar.tsx From your_spotify with GNU General Public License v3.0 | 5 votes |
|
export default function Bar({
data,
xFormat,
yFormat,
tooltipLabelFormatter,
tooltipValueFormatter,
tooltipItemSorter,
customXTick,
}: StackedBarProps) {
const realFormatter = useMemo(() => {
if (tooltipValueFormatter) {
return (...args: any[]) => [tooltipValueFormatter(...args), null];
}
return undefined;
}, [tooltipValueFormatter]);
const allKeys = useMemo(
() =>
data.reduce<Set<string>>((acc, curr) => {
Object.keys(curr)
.filter((key) => key !== 'x')
.forEach((key) => acc.add(key));
return acc;
}, new Set()),
[data],
);
return (
<ResponsiveContainer width="100%" height="100%">
<BarChart data={data}>
<XAxis
dataKey="x"
tickFormatter={xFormat}
tick={customXTick}
style={{ fontWeight: 'bold' }}
/>
<YAxis tickFormatter={yFormat} width={40} />
{Array.from(allKeys).map((k, index) => (
<RBar key={k} stackId="only" dataKey={k} fill={getColor(index)} />
))}
<Tooltip
wrapperStyle={{ zIndex: 10 }}
contentStyle={{ backgroundColor: 'var(--background)' }}
labelStyle={{ color: 'var(--text-on-light)' }}
labelFormatter={tooltipLabelFormatter}
formatter={realFormatter}
itemSorter={tooltipItemSorter}
/>
</BarChart>
</ResponsiveContainer>
);
}
Example #28
| Source File: index.tsx From Lux-Viewer-2021 with Apache License 2.0 | 5 votes |
|
Graph = ({ data, ylabel, xlabel }: GraphProps) => {
const renderColorfulLegendText = (value: string, entry: any) => {
const { color } = entry;
return <span style={{ color: '#f9efe2' }}>{value}</span>;
};
return (
<div className="Graph">
<ResponsiveContainer width={'100%'} height={220}>
<LineChart
// width={200}
onClick={() => {}}
// height={150}
data={data}
margin={{ top: 15, right: 20, left: 0, bottom: 15 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name">
<Label
value={xlabel}
offset={-15}
position="insideBottom"
fill="#f9efe2"
/>
</XAxis>
<YAxis
label={{
value: ylabel,
angle: -90,
position: 'insideLeft',
fill: '#f9efe2',
color: 'f9efe2',
}}
></YAxis>
<Tooltip labelStyle={{ color: '#323D34' }} />
{/* <Legend
verticalAlign="top"
height={36}
formatter={renderColorfulLegendText}
/> */}
<Line
type="monotone"
dataKey="team0"
name="Team 0"
dot={false}
strokeWidth={2}
isAnimationActive={false}
stroke={TEAM_A_COLOR_STR}
/>
<Line
type="monotone"
dataKey="team1"
name="Team 1"
dot={false}
strokeWidth={2}
isAnimationActive={false}
stroke={TEAM_B_COLOR_STR}
/>
</LineChart>
</ResponsiveContainer>
</div>
);
}
Example #29
| Source File: Question.tsx From project-loved-web with MIT License | 5 votes |
|
function ComparingChart({ answers, comparingStatistic }: ComparingChartProps) {
const intl = useIntl();
const colors = useColors();
const xAxisProps: XAxisProps = {
dataKey: 'statistic',
interval: 'preserveStartEnd',
stroke: colors.content,
tick: { fill: colors.content },
tickLine: { stroke: colors.content },
};
if (comparingStatistic === 'rank') {
xAxisProps.domain = ['dataMin', 'dataMax'];
xAxisProps.scale = 'log';
xAxisProps.tickFormatter = (value) => intl.formatNumber(value);
xAxisProps.type = 'number';
}
return (
<AreaChart data={answers} width={700} height={175}>
<defs>
<linearGradient id='answerColor' x1='0' y1='0' x2='0' y2='1'>
<stop offset='0%' stopColor={colors['rating-2']} stopOpacity={0.9} />
<stop offset='20%' stopColor={colors['rating-1']} stopOpacity={0.8} />
<stop offset='40%' stopColor={colors['rating-0']} stopOpacity={0.7} />
<stop offset='60%' stopColor={colors['rating--1']} stopOpacity={0.6} />
<stop offset='80%' stopColor={colors['rating--2']} stopOpacity={0.5} />
<stop offset='100%' stopColor={colors['rating--2']} stopOpacity={0} />
</linearGradient>
</defs>
<XAxis {...xAxisProps} />
<YAxis dataKey='average' domain={[0, 5]} hide />
<Area
type='monotone'
dataKey='average'
stroke={colors.content}
fillOpacity={1}
fill='url(#answerColor)'
/>
</AreaChart>
);
}
