signoz/frontend/src/components/usage/UsageExplorer.tsx

import React, {useEffect} from 'react';
import { Bar } from 'react-chartjs-2'
import { Card } from 'antd'
import { connect } from 'react-redux';

import { getUsageData, GlobalTime, usageDataItem } from '../../actions';
import { StoreState } from '../../reducers'

interface UsageExplorerProps {
  usageData: usageDataItem[],
  getUsageData: Function,
  globalTime: GlobalTime,
}


  
const _UsageExplorer = (props: UsageExplorerProps) => {

    useEffect( () => {
      props.getUsageData(props.globalTime);
    }, [props.globalTime]);

    const data = {
        labels: props.usageData.map(s => new Date(s.timestamp/1000000)),
        datasets: [
          {
            label: 'Span Count',
            data: props.usageData.map(s => s.count),
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 2,
          },
        ],
      }
      
      const options = {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
                fontSize: 10,
              },
            },
          ],
          xAxes: [
            {
              type: 'time',
              // distribution: 'linear', // Bar graph doesn't take lineardistribution type?
      
              ticks: {
                beginAtZero: true,
                fontSize: 10,
              },
            },
          ],
        },
        legend: {
            display: false,
        }
      }
      
        return(
        <React.Fragment>
            {/* PNOTE - TODO - Keep it in reponsive row column tab */}
            <Card style={{ width: "50%" , margin:20 }} bodyStyle={{padding:20 }}>
              <Bar data={data} options={options} />
            </Card>
          
        </React.Fragment>
        );
}

const mapStateToProps = (state: StoreState): { usageData: usageDataItem[], globalTime: GlobalTime } => {
  return {  usageData : state.usageDate, globalTime: state.globalTime };
};

export const UsageExplorer = connect(mapStateToProps, {
  getUsageData: getUsageData,
})(_UsageExplorer);