recharts#Scatter TypeScript Examples
The following examples show how to use
recharts#Scatter.
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: 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 #2
| Source File: HourlyIncidents.tsx From backstage-plugin-opsgenie with MIT License | 6 votes |
|
Graph = ({context}: {context: Context}) => {
const analyticsApi = useApi(analyticsApiRef);
const dataPoints = analyticsApi.incidentsByHour(context);
return (
<div id="hourly-incidents" style={{ width: '100%', height: 300, paddingTop: '1.2rem', paddingRight: '1.2rem' }}>
<ResponsiveContainer>
<ScatterChart data={dataPoints}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="hour" name="Hour" unit="h" />
<YAxis dataKey="total" name="Total" />
<Tooltip content={<FilterZeroTooltip />} />
<Scatter name="Hour" data={dataPoints} fill="#8884d8" />
</ScatterChart>
</ResponsiveContainer>
</div>
);
}
Example #3
| Source File: ScatterChart.tsx From opensaas with MIT License | 6 votes |
|
ScatterChart: React.FC<ScatterChartProps> = (props: ScatterChartProps) => {
const { data, width, height, showGrid, strokeColor, fillColor, scatterName } = props;
return (
<ResponsiveContainer>
<RechartsScatterChart width={width} height={height}>
{showGrid ? <CartesianGrid strokeDasharray='3 3' /> : null}
<XAxis type='number' dataKey='x' name={data?.xname} tickLine={false} />
<YAxis type='number' dataKey='y' name={data?.yname} tickLine={false} />
<Tooltip />
<Legend
verticalAlign='top'
content={<CustomizedLegend strokeColor={strokeColor} fillColor={fillColor} scatterName={scatterName} />}
/>
<Scatter
name={scatterName}
data={data.lineChartData}
shape={<CustomizedDot strokeColor={strokeColor} fillColor={fillColor} r={6} cx={10} cy={10} />}
/>
</RechartsScatterChart>
</ResponsiveContainer>
);
}
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: 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 #6
| Source File: BubbleChart.tsx From korona-info with MIT License | 4 votes |
|
BubbleChart = ({ data }: { data: GroupedData }) => {
const [chartScale, setChartScale] = useState<'cumulative' | 'daily'>('daily');
const { t } = useContext(UserContext);
return (
<Box width={['100%', '100%', '100%', '100%', 1 / 2]} p={3}>
<Block
title={t('accumulation by healthcare district')}
>
<ButtonGroup
spacing={0}
alignSelf="center"
display="flex"
justifyContent="center"
marginTop="-15px"
>
<Button
size="xs"
fontFamily="Space Grotesk Regular"
px={3}
letterSpacing="1px"
borderRadius="4px 0px 0px 4px"
borderWidth="0px"
isActive={chartScale === 'cumulative'}
onClick={() => setChartScale('cumulative')}
>
{t('cumulative')}
</Button>
<Button
size="xs"
fontFamily="Space Grotesk Regular"
px={3}
letterSpacing="1px"
borderRadius="0px 4px 4px 0px"
borderWidth="0px"
isActive={chartScale === 'daily'}
onClick={() => setChartScale('daily')}
>
{t('daily')}
</Button>
</ButtonGroup>
<Box p={5}>
{_.map(data, (district, key) => {
return (
<ResponsiveContainer key={key} width={'100%'} height={25}>
<ScatterChart
margin={{
top: 0,
right: 0,
bottom: -17,
left: 0
}}
>
<XAxis
type="category"
dataKey="date"
interval={0}
tick={false}
axisLine={false}
tickLine={false}
/>
<YAxis
type="number"
dataKey="y"
name={key}
height={0}
interval={0}
tick={false}
tickLine={false}
axisLine={false}
label={{ value: key === 'all' ? t('total') : key, position: 'insideLeft' }}
/>
<ZAxis
type="number"
name="infections"
dataKey={
chartScale === 'daily' ? 'infectionsDaily' : 'infections'
}
range={[0, 350]}
// @ts-ignore
domain={[0, chartScale === 'daily' ? 50 : 350]}
/>
<Tooltip
cursor={false}
wrapperStyle={{ zIndex: 100 }}
isAnimationActive={false}
content={(props: any) => (props.payload[0] &&
<TooltipWrapper role='tooltip'>
<h5>{format(
// @ts-ignore
utcToZonedTime(props.payload[0].value, 'Europe/Helsinki'),
'd.M.yyyy'
)}</h5>
<p className="label">{t('cases')}: {props.payload[2].value}</p>
</TooltipWrapper>
)}
/>
<Scatter
data={district.timeSeries.infectionDevelopmentData30Days.map(
(data: InfectionDevelopmentDataItem) => ({
...data,
y: 0
})
)}
fill="#f3858d"
/>
</ScatterChart>
</ResponsiveContainer>
);
})}
</Box>
</Block>
</Box>
);
}
