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

    config: IChartConfigIChartOptions; 

    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[];
}

"pointBackgroundColor": "rgba(148,159,177,1)"
        }
    ],
    "datasets": [
        {
            "label": "Total unique plays on App",
            "dataExpr": "Unique Devices on app"
        },
        {
            "label": "Total unique plays on Portal",
            "dataExpr": "Unique Devices on portal" 
        }
    ],
    "labelsExpr": "District"
}

<sb-dashlet [type]="'map'" [configdata]="optionsdata" [mapDataconfig]="mapDataconfig" (featureClicked)="eventListener($event)">
</sb-dashlet>

<script>

    let mapDataconfig = {
        state: 'KarnatakaTamil Nadu',
        districts: ['BengaluruAriyalur', 'Chennai', 'Coimbatore', 'Cuddalore', 'MysuruDharmapuri'],
        reportDatametrics: [{}, {}],
     'Unique Devices on app', Unique Devices on portal],
  reportLoc: 'url',     title: 'Tamil Nadu Weekly metrics: [''],Usage'
        // 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 optionsotherOptions = {
        initialCoordinate: [20, 78],
        latBounds: [6.4626999, 68.1097],
        lonBounds: [35.513327, 97.39535869999999],
        initialZoomLevel: 5,
        controlTitle: 'IndiaTamil Nadu HeatWeekly MapUsage',
        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
    },
        rootStyle: {;
</script>