import * as React from 'react';
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import { useTheme } from "@mui/material";


const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'BasicScatterChart ',
},
]; 

const data = [
    {
        id: 'data-0',
        x1: 329.39,
        x2: 391.29,
        y1: 443.28,
        y2: 153.9,
    },
    {
        id: 'data-1',
        x1: 96.94,
        x2: 139.6,
        y1: 110.5,
        y2: 217.8,
    },
    {
        id: 'data-2',
        x1: 336.35,
        x2: 282.34,
        y1: 175.23,
        y2: 286.32,
    },
    {
        id: 'data-3',
        x1: 159.44,
        x2: 384.85,
        y1: 195.97,
        y2: 325.12,
    },
    {
        id: 'data-4',
        x1: 188.86,
        x2: 182.27,
        y1: 351.77,
        y2: 144.58,
    },
    {
        id: 'data-5',
        x1: 143.86,
        x2: 360.22,
        y1: 43.253,
        y2: 146.51,
    },
    {
        id: 'data-6',
        x1: 202.02,
        x2: 209.5,
        y1: 376.34,
        y2: 309.69,
    },
    {
        id: 'data-7',
        x1: 384.41,
        x2: 258.93,
        y1: 31.514,
        y2: 236.38,
    },
    {
        id: 'data-8',
        x1: 256.76,
        x2: 70.571,
        y1: 231.31,
        y2: 440.72,
    },
    {
        id: 'data-9',
        x1: 143.79,
        x2: 419.02,
        y1: 108.04,
        y2: 20.29,
    },
    {
        id: 'data-10',
        x1: 103.48,
        x2: 15.886,
        y1: 321.77,
        y2: 484.17,
    },
    {
        id: 'data-11',
        x1: 272.39,
        x2: 189.03,
        y1: 120.18,
        y2: 54.962,
    },
    {
        id: 'data-12',
        x1: 23.57,
        x2: 456.4,
        y1: 366.2,
        y2: 418.5,
    },
    {
        id: 'data-13',
        x1: 219.73,
        x2: 235.96,
        y1: 451.45,
        y2: 181.32,
    },
    {
        id: 'data-14',
        x1: 54.99,
        x2: 434.5,
        y1: 294.8,
        y2: 440.9,
    },
    {
        id: 'data-15',
        x1: 134.13,
        x2: 383.8,
        y1: 121.83,
        y2: 273.52,
    },
    {
        id: 'data-16',
        x1: 12.7,
        x2: 270.8,
        y1: 287.7,
        y2: 346.7,
    },
    {
        id: 'data-17',
        x1: 176.51,
        x2: 119.17,
        y1: 134.06,
        y2: 74.528,
    },
    {
        id: 'data-18',
        x1: 65.05,
        x2: 78.93,
        y1: 104.5,
        y2: 150.9,
    },
    {
        id: 'data-19',
        x1: 162.25,
        x2: 63.707,
        y1: 413.07,
        y2: 26.483,
    },
    {
        id: 'data-20',
        x1: 68.88,
        x2: 150.8,
        y1: 74.68,
        y2: 333.2,
    },
    {
        id: 'data-21',
        x1: 95.29,
        x2: 329.1,
        y1: 360.6,
        y2: 422.0,
    },
    {
        id: 'data-22',
        x1: 390.62,
        x2: 10.01,
        y1: 330.72,
        y2: 488.06,
    },
];

export default function BasicScatterChart() {
    const theme = useTheme();
    const primary = theme.palette.primary.main;
    const secondary = theme.palette.secondary.main;
    return (
     

            <ScatterChart
                width={600}
                height={300}
                series={[
                    {
                        label: 'Series A',
                        data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
                        color: primary
                    },
                    {
                        label: 'Series B',
                        data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
                        color: secondary
                    },
                ]}
            />
       
    );
}

import * as React from 'react';
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import { axisClasses } from '@mui/x-charts/ChartsAxis';
import { useTheme } from "@mui/material";
const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'ScatterDataset ',
},
]; 

const dataset = [
    {
        version: 'data-0',
        a1: 329.39,
        a2: 391.29,
        b1: 443.28,
        b2: 153.9,
    },
    {
        version: 'data-1',
        a1: 96.94,
        a2: 139.6,
        b1: 110.5,
        b2: 217.8,
    },
    {
        version: 'data-2',
        a1: 336.35,
        a2: 282.34,
        b1: 175.23,
        b2: 286.32,
    },
    {
        version: 'data-3',
        a1: 159.44,
        a2: 384.85,
        b1: 195.97,
        b2: 325.12,
    },
    {
        version: 'data-4',
        a1: 188.86,
        a2: 182.27,
        b1: 351.77,
        b2: 144.58,
    },
    {
        version: 'data-5',
        a1: 143.86,
        a2: 360.22,
        b1: 43.253,
        b2: 146.51,
    },
    {
        version: 'data-6',
        a1: 202.02,
        a2: 209.5,
        b1: 376.34,
        b2: 309.69,
    },
    {
        version: 'data-7',
        a1: 384.41,
        a2: 258.93,
        b1: 31.514,
        b2: 236.38,
    },
    {
        version: 'data-8',
        a1: 256.76,
        a2: 70.571,
        b1: 231.31,
        b2: 440.72,
    },
    {
        version: 'data-9',
        a1: 143.79,
        a2: 419.02,
        b1: 108.04,
        b2: 20.29,
    },
];

const chartSetting = {
    yAxis: [
        {
            label: 'rainfall (mm)',
        },
    ],
    sx: {
        [`.${axisClasses.left} .${axisClasses.label}`]: {
                transform: 'translate(-20px, 0)',
        },
    },
            width: 500,
            height: 300,
};

            export default function ScatterDataset() {
    const theme = useTheme();
            const primary = theme.palette.primary.main;
            const secondary = theme.palette.secondary.main;
            return (

            <ScatterChart
                dataset={dataset}
                series={[
                    { datasetKeys: { id: 'version', x: 'a1', y: 'a2' }, label: 'Series A', color: primary },
                    { datasetKeys: { id: 'version', x: 'b1', y: 'b2' }, label: 'Series B', color: secondary },
                ]}
                {...chartSetting}
            />

            );
}

            

import * as React from 'react';
import Stack from '@mui/material/Stack';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Typography from '@mui/material/Typography';
import Slider from '@mui/material/Slider';
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import { useTheme } from "@mui/material";

const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'VoronoiInteractionChart ',
},
]; 

const data = [
    { x1: 529.39, y1: 643.28, x2: 191.29, y2: -46.1, id: 'data-0' },
    { x1: 296.94, y1: 310.5, x2: -60.4, y2: 17.8, id: 'data-1' },
    { x1: 536.35, y1: 375.23, x2: 82.34, y2: 86.32, id: 'data-2' },
    { x1: 359.44, y1: 395.97, x2: 184.85, y2: 125.12, id: 'data-3' },
    { x1: 388.86, y1: 551.77, x2: -17.73, y2: -55.42, id: 'data-4' },
    { x1: 343.86, y1: 243.25, x2: 160.22, y2: -53.49, id: 'data-5' },
    { x1: 402.02, y1: 576.34, x2: 9.5, y2: 109.69, id: 'data-6' },
    { x1: 584.41, y1: 231.51, x2: 58.93, y2: 36.38, id: 'data-7' },
    { x1: 456.76, y1: 431.31, x2: -129.43, y2: 240.72, id: 'data-8' },
    { x1: 343.79, y1: 308.04, x2: 219.02, y2: -179.71, id: 'data-9' },
    { x1: 303.48, y1: 521.77, x2: -184.11, y2: 284.17, id: 'data-10' },
    { x1: 472.39, y1: 320.18, x2: -10.97, y2: -145.04, id: 'data-11' },
    { x1: 223.57, y1: 566.2, x2: 256.4, y2: 218.5, id: 'data-12' },
    { x1: 419.73, y1: 651.45, x2: 35.96, y2: -18.68, id: 'data-13' },
    { x1: 254.99, y1: 494.8, x2: 234.5, y2: 240.9, id: 'data-14' },
    { x1: 334.13, y1: 321.83, x2: 183.8, y2: 73.52, id: 'data-15' },
    { x1: 212.7, y1: 487.7, x2: 70.8, y2: 146.7, id: 'data-16' },
    { x1: 376.51, y1: 334.06, x2: -80.83, y2: -125.47, id: 'data-17' },
    { x1: 265.05, y1: 304.5, x2: -121.07, y2: -49.1, id: 'data-18' },
    { x1: 362.25, y1: 613.07, x2: -136.29, y2: -173.52, id: 'data-19' },
    { x1: 268.88, y1: 274.68, x2: -49.2, y2: 133.2, id: 'data-20' },
    { x1: 295.29, y1: 560.6, x2: 129.1, y2: 222, id: 'data-21' },
    { x1: 590.62, y1: 530.72, x2: -189.99, y2: 288.06, id: 'data-22' },
  ];
  
  export default function VoronoiInteractionChart() {
    const [voronoiMaxRadius, setVoronoiMaxRadius] = React.useState(25);
    const [disableVoronoi, setDisableVoronoi] = React.useState(false);
    const [undefinedRadius, setUndefinedRadius] = React.useState(true);
  
    const handleMaxRadiusChange = (event, newValue) => {
      if (typeof newValue !== 'number') {
        return;
      }
      setVoronoiMaxRadius(newValue);
    };
    const theme = useTheme();
    const primary = theme.palette.primary.main;
    const secondary = theme.palette.secondary.main;
  
    return (
     
  
        <Stack direction="column" sx={{ width: '100%' }}>
          <ScatterChart
            height={300}
            disableVoronoi={disableVoronoi}
            voronoiMaxRadius={undefinedRadius ? undefined : voronoiMaxRadius}
            dataset={data}
            series={[
              {
                label: 'Series A',
                data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
                color: primary
              },
              {
                label: 'Series B',
                data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })),
                color: secondary
              },
            ]}
          />
          <div>
            <Typography id="max-radius-value" gutterBottom>
              max radius
            </Typography>
            <Slider
              value={voronoiMaxRadius}
              onChange={handleMaxRadiusChange}
              valueLabelDisplay="auto"
              min={1}
              max={100}
              aria-labelledby="max-radius-value"
              disabled={disableVoronoi || undefinedRadius}
            />
          </div>
          <Stack direction="row">
            <FormControlLabel
              checked={disableVoronoi}
              control={
                <Checkbox
                  onChange={(event) => setDisableVoronoi(event.target.checked)}
                />
              }
              label="disableVoronoi"
              labelPlacement="end"
            />
            <FormControlLabel
              checked={undefinedRadius}
              control={
                <Checkbox
                  onChange={(event) => setUndefinedRadius(event.target.checked)}
                />
              }
              label="undefined radius"
              labelPlacement="end"
            />
          </Stack>
        </Stack>
  
    );
  }

            

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
import { useTheme } from '@mui/material';

const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'ScatterClickNoSnapChart ',
},
]; 





export default function ScatterClickNoSnapChart() {

    const theme = useTheme();
    const primaryColor = theme.palette.primary.main;
    const secondaryColor = theme.palette.secondary.main;

    const scatterChartsParams = {

        series: [
            {
                id: 'series-1',
                type: 'scatter',
                data: [
                    { x: 6.5e-2, y: -1.3, id: 0 },
                    { x: -2.1, y: -7.0e-1, id: 1 },
                    { x: -7.6e-1, y: -6.7e-1, id: 2 },
                    { x: -1.5e-2, y: -2.0e-1, id: 3 },
                    { x: -1.4, y: -9.9e-1, id: 4 },
                    { x: -1.1, y: -1.5, id: 5 },
                    { x: -7.0e-1, y: -2.7e-1, id: 6 },
                    { x: -5.1e-1, y: -8.8e-1, id: 7 },
                    { x: -4.0e-3, y: -1.4, id: 8 },
                    { x: -1.3, y: -2.2, id: 9 },
                ],
                label: 'A',
                highlightScope: {
                    highlight: 'item',
                },
                color: primaryColor,
            },
            {
                id: 'series-2',
                type: 'scatter',
                data: [
                    { x: 1.8, y: -1.7e-2, id: 0 },
                    { x: 7.1e-1, y: 2.6e-1, id: 1 },
                    { x: -1.2, y: 9.8e-1, id: 2 },
                    { x: 2.0, y: -2.0e-1, id: 3 },
                    { x: 9.4e-1, y: -2.7e-1, id: 4 },
                    { x: -4.8e-1, y: -1.6e-1, id: 5 },
                    { x: -1.5, y: 1.1, id: 6 },
                    { x: 1.3, y: 3.4e-1, id: 7 },
                    { x: -4.2e-1, y: 1.0e-1, id: 8 },
                    { x: 5.4e-2, y: 4.0e-1, id: 9 },
                ],
                label: 'B',
                highlightScope: {
                    highlight: 'item',
                },
                color: secondaryColor,
            },
        ] ,
        height: 400,
    };
    const [data, setData] = React.useState();

    const { axis, item, ...other } = data ?? {};
    const dataDisplayed = data && {
        ...(item
            ? {
                item: {
                    dataIndex: item.dataIndex,
                    series: {
                        id: item.series.id,
                        toReplace: '',
                    },
                },
            }
            : undefined),
        ...(axis ? { axis } : undefined),
        ...other,
    };

  const formattedCode = dataDisplayed
        ? JSON.stringify(dataDisplayed, null, 1).replace(
            '"toReplace": ""',
            '// ... (entire series definition)' // Replace part of the code
        )
        : '// The data will appear here';

    return (

            <Stack
                direction={{ xs: 'column', md: 'row' }}
                spacing={{ xs: 0, md: 4 }}
                sx={{ width: '100%' }}
            >
                <Box sx={{ flexGrow: 1 }}>
                    <ScatterChart
                        series={scatterChartsParams.series}
                        height={scatterChartsParams.height}
                        onItemClick={(event: any, d: any) => setData(d)}
                    />
                </Box>
                <Stack direction="column" sx={{ width: { xs: '100%', md: '40%' } }}>
                    <Box
                        sx={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                        }}
                    >
                        <Typography>Click on the chart</Typography>
                        <IconButton
                            aria-label="reset"
                            size="small"
                            onClick={() => {
                                setData(null);
                            }}
                        >
                            <UndoOutlinedIcon fontSize="small" />
                        </IconButton>
                    </Box>
                     <SyntaxHighlighter language="json" style={docco}>
                        {formattedCode}
                    </SyntaxHighlighter>
                </Stack>
            </Stack>
    
    );
}