import { RenderBase, UpdateInfo } from "@businessanalytics/customvis-lib";
import { init, use } from "https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"; // Loading ECharts library 
import {Grid3DComponent, Scatter3DChart} from "https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js";
//import {Grid3DComponent}  from "https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/components.min.js";
//import {Scatter3DChart} from "https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/charts.min.js";

export default class extends RenderBase
{
    private _chart : any;
    protected create( _node: HTMLElement ): HTMLElement
    {
        _node.textContent = "Basic VizBundle";
        use([Grid3DComponent]) ;
        use([Scatter3DChart]) ;    
        this._chart = init(_node);
         
        
        return _node;
    }

    protected update( _info: UpdateInfo ): void
    {
        const self = this;
        var option : any;
         
        var symbolSize = 2.5;
        
         
        
        //this._chart.setOption
        //(
        option = 
           {  
             grid3D : {},
             zAxis3D: {},
             yAxis3D: {},
             xAxis3D: {type : 'category'},
             dataset: {
                dimensions: [
                 'Income',
                 'Life Expectancy',
                 'Population',
                 'Country',
                 { name: 'Year', type: 'ordinal' }
               ],
               source: [
                 ["Income","Life Expectancy","Population","Country","Year"],
                 [815,34.05,351014,"Australia",1800],[1314,39,645526,"Canada",1800],
                 [985,32,321675013,"China",1800],[864,32.2,345043,"Cuba",1800]
               
               ]
             },
           series: [
             {
               type: 'scatter3D',
               symbolSize: 5,
               encode: {
                 x: 'Country',
                 y: 'Life Expectancy',
                 z: 'Income',
                 tooltip: [0, 1, 2, 3, 4]
               }
             }
           ]
               
              
        //}, true); 
         
      };

      this._chart.setOption(option);

        // Resize chart when container is resized
        //if ( _info.reason.size )
        //this._chart.resize();

     
    }
    
}