d604f9920b
* feat ui: dashboards redesign start * more cards * fix ui: more different cards... * feat ui: finish cards, all trigger, all icons * change(ui): added missin const * feature(ui): new dashboard modal * feature(ui): new dashboard modal * change(ui): new cards * change(ui): dashboard redesign * change(ui): dashboard redesign * change(ui): dashboard redesign * change(ui): modal context and alert form * change(ui): table card show more with modal * change(ui): examples * change(ui): example categorize and other improvements * change(ui): example categorize and other improvements * change(ui): performance cards * change(ui): insights card * Various style updates in dashboards and other pages. (#2308) * Various minor style updates * Various style improvements * Update ExampleCards.tsx * change(ui): fixed an issue with card create * change(ui): fixed an issue with card create * change(ui): default filters and events order * change(ui): random data * Dashboards redesign - improvments (#2313) * Various minor style updates * Various style improvements * Update ExampleCards.tsx * various minor improvements in dashbaords. * revised dashboard widget header * change(ui): sessions by user * change(ui): funnel example * change(ui): modal height and scroll * change(ui): example cards with data * change(ui): example cards with data * change(ui): funnel bar text color * change(ui): example cards overlay click * change(ui): path analysis filter card --------- Co-authored-by: Shekar Siri <sshekarsiri@gmail.com> Co-authored-by: Sudheer Salavadi <connect.uxmaster@gmail.com>
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import React from 'react'
|
|
import {Styles} from '../../common';
|
|
import {ResponsiveContainer, XAxis, YAxis, CartesianGrid, Tooltip} from 'recharts';
|
|
import {LineChart, Line, Legend} from 'recharts';
|
|
|
|
interface Props {
|
|
data: any;
|
|
params: any;
|
|
// seriesMap: any;
|
|
colors: any;
|
|
onClick?: (event, index) => void;
|
|
yaxis?: any;
|
|
label?: string;
|
|
}
|
|
|
|
function CustomMetricLineChart(props: Props) {
|
|
const {
|
|
data = {chart: [], namesMap: []},
|
|
params,
|
|
colors,
|
|
onClick = () => null,
|
|
yaxis = {...Styles.yaxis},
|
|
label = 'Number of Sessions'
|
|
} = props;
|
|
|
|
return (
|
|
<ResponsiveContainer height={240} width="100%">
|
|
<LineChart
|
|
data={data.chart}
|
|
margin={Styles.chartMargins}
|
|
// syncId={ showSync ? "domainsErrors_4xx" : undefined }
|
|
onClick={onClick}
|
|
// isAnimationActive={ false }
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#EEEEEE"/>
|
|
<XAxis
|
|
{...Styles.xaxis}
|
|
dataKey="time"
|
|
interval={params.density / 7}
|
|
/>
|
|
<YAxis
|
|
{...yaxis}
|
|
allowDecimals={false}
|
|
tickFormatter={val => Styles.tickFormatter(val)}
|
|
label={{
|
|
...Styles.axisLabelLeft,
|
|
value: label || "Number of Sessions"
|
|
}}
|
|
/>
|
|
<Legend/>
|
|
<Tooltip {...Styles.tooltip} />
|
|
{Array.isArray(data.namesMap) && data.namesMap.map((key, index) => (
|
|
<Line
|
|
key={key}
|
|
name={key}
|
|
type="monotone"
|
|
dataKey={key}
|
|
stroke={colors[index]}
|
|
fillOpacity={1}
|
|
strokeWidth={2}
|
|
strokeOpacity={0.6}
|
|
// fill="url(#colorCount)"
|
|
dot={false}
|
|
/>
|
|
))}
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
)
|
|
}
|
|
|
|
export default CustomMetricLineChart
|