import { Chart, ChartTooltip, ChartSeries, ChartSeriesItem } from '@progress/kendo-react-charts';
import { useState, useEffect, useRef } from 'react';
import Disk from './disk';

export default function Home() {
    const intervalDisk = useRef(null);

    const diskData1 = [{ categoryField: 'root', value: 40, color: 'blue' }];

    const [diskData1State, setDiskData1State] = useState(diskData1);

    const isClient = typeof window === 'object';

    useEffect(() => {
        if (isClient) {
            intervalDisk.current = setInterval(() => {
                diskData1[0].value = Math.floor(Math.random() * 100);
                // console.log(new Date() + ', ' + diskData1[0].value);
                setDiskData1State(JSON.parse(JSON.stringify(diskData1)));
            }, 10000);
            return () => clearInterval(intervalDisk.current);
        }
    }, []);

    return (
        <>
            <Disk diskId="1" interval="3000" />
            <Disk diskId="2" interval="5000" />
            <div id="diskDataId2">
                <Chart
                    style={{
                        width: '90%',
                        height: '85%',
                        position: 'center center',
                    }}
                >
                    <ChartTooltip />
                    <ChartSeries>
                        <ChartSeriesItem
                            type="bar"
                            stack={{
                                type: 'normal',
                            }}
                            gap={2}
                            spacing={0.35}
                            categoryField="categoryField"
                            colorField="color"
                            data={diskData1}
                            tooltip={true}
                        />
                    </ChartSeries>
                </Chart>
            </div>
        </>
    );
}

onRowClick={()=>{}}

import '@progress/kendo-theme-default/dist/all.css';
import { Editor, EditorTools } from "@progress/kendo-react-editor";
const {
  Bold,
  Italic,
  Underline,
  AlignLeft,
  AlignRight,
  AlignCenter,
  Indent,
  Outdent,
  OrderedList,
  UnorderedList,
  Undo,
  Redo,
  Link,
  Unlink,
} = EditorTools;

const content = `<p>The KendoReact Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;

const App = () => {
  return (
    <Editor
      tools={[
        [Bold, Italic, Underline],
        [Undo, Redo],
        [Link, Unlink],
        [AlignLeft, AlignCenter, AlignRight],
        [OrderedList, UnorderedList, Indent, Outdent],
      ]}
      contentStyle={{
        height: 320,
      }}
      defaultContent={content}
    />
  );
};

export default App;

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { NumericTextBox } from '@progress/kendo-react-inputs';

const products = [
  {
    ProductID: 1,
    ProductName: 'Chai',
    Price: 18.0,
    Discount: 0,
  },
  {
    ProductID: 2,
    ProductName: 'Chang',
    Price: 19.0,
    Discount: 0,
  },
];

const CustomCell = (props) => {
  React.useEffect(() => {
    console.log('componet mount');
  }, []);

  return (
    <td style={{ padding: '1rem', textAlign: 'center' }}>
      <NumericTextBox
        onChange={(e) => props.onChange(e, props)}
        style={{ width: '100px' }}
        value={props.dataItem[props.field]}
      />
    </td>
  );
};

const App = () => {
  const [data, setData] = React.useState(products);

  const handleDiscountChange = (e, cellProps) => {
    setData((_data) => {
      return _data.map((item) => {
        if (item.ProductName === cellProps.dataItem.ProductName) {
          item.Discount = e.value || 0;
          item.Price -= item.Discount;
        }
        return item;
      });
    });
  };

  return (
    <>
      <Grid data={data} title={'title'} editField="inEdit">
        <GridColumn field="ProductName" title="Product Name" />
        <GridColumn
          field="Discount"
          cell={(props) => {
            return <CustomCell {...props} onChange={handleDiscountChange} />;
          }}
        />
        <GridColumn field="Price" title="Price" editor="numeric" />
      </Grid>
    </>
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));