Page Comparison

interface IChart extends IBase {
    
    readonly reportType: IReportType = "chart"
  
    readonly _defaultConfig: IChartConfig; // default config for tooltips colors legend etc.

    config: IChartConfig; 

    chartClick: EventEmitter<any>;
    chartHover: EventEmitter<any>;

    chartBuilder(config); // (prepares / converts) input chart config as per the underlying chart library used.

    refreshChart(); // refreshes and updates the chart either at specific interval or explicitly triggerd

    addData({ label, data, config }); //appends the label and data at the end;

    removeData(); //pops the last data and label
    removeData(label: string) // removes a specific label

    getTelemetry();

    // mergeData(data1, data2, ...dataN): any[];

    getCurrentSelection(); 
    
    getDatasetAtIndex(index: number);
}

/*
##########################################################################
*
*.         depenedent interfaces are as follows:-
*
##########################################################################
*/


interface IChartConfig {
    type: IChartType;
    options?: IChartOptions;
    [key: string]: any;
}

type IChartType = "bar" | "line" | "pie" | "etc";

type IChartOptions = {
    labels? : string[], // if labels are passed explicitely
    labelExpr ? : string; // column name to use as x-axis labels;
    datasets: IDataset[]; // datasets - y axis data
    tooltip?: object;
    legend?: object
    animation?: object;
    colors?: object;
    title?: string;
    description: string;
    subtitle?: string;
    caption?: object;
    filters?: IFilterConfig;
    scales?: {
        axes: any;
        [key: string]: any;
    };
    [key: string]: any;
};

type IDataset  = {
    label: string;
    dataExpr?: string;
    data: any[];
}

chartClickHandler($event)" (chartHover)="

chartHoverHandler($event)"></sb-dashlet>

type: "pie",

options: {
          datasets: [
            { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
            { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
            { data: [180, 480, 770, 90, 1000, 270, 400], label: 'Series C', yAxisID: 'y-axis-1' }
        ],
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          options: {
            responsive: true,
            scales: {
                xAxes: [{}],
                yAxes: [
                    {
                        id: 'y-axis-0',
                        position: 'left',
                    }
                ]
            }
        },
          colors: [
            {
                backgroundColor: 'rgba(148,159,177,0.2)',
                borderColor: 'rgba(148,159,177,1)',
                pointBackgroundColor: 'rgba(148,159,177,1)',
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgba(148,159,177,0.8)'

       }
 

       ],
 

legends: 

true
        

}
    }

<map<sb-dashlet [optionsconfig]="options" [mapData]="mapData" (featureClicked)="eventListener($event)">
</map>sb-dashlet>

<script>
    let mapData = {
        state: 'Karnataka',
        districts: ['Bengaluru', 'Mysuru'],
        reportData: [{}, {}],
        reportLoc: 'url',
        metrics: [''],
        // country: 'India', // Optional - to show india map with states
        // states: ['Karnataka'], // Optional - list of states to show on the map
    }


  // default config and can be overridden with new configurations 

    let options = {
        initialCoordinate: [20, 78],
        latBounds: [6.4626999, 68.1097],
        lonBounds: [35.513327, 97.39535869999999],
        initialZoomLevel: 5,
        controlTitle: 'India Heat Map',
        tileLayer: {
            urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            options: {
                attributions: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }
        },
        rootStyle: {
            fillColor: '#007cbe'
        },
        otherOptions: any
    };
</script>

<table<sb-elementdashlet [data]="[{}]" [columnsConfigurationconfig]="columnsConfiguration" (rowClickHandler)="eventListener($click)"> 
</tablesb-element>dashlet>

<script>

    let columnsConfiguration = [{
        title: string,
        searchable: boolean,
        orderable: boolean,
        data: 'key',
        visible: boolean,
        render: () => {},
        paging: boolean,
        info: boolean,
        autoWidth: boolean,
        others: any
    }]

</script>