JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<script type='module' src='https://www.vectary.com/viewer/v1/scripts/vctr-viewer.js'></script>
<vctr-viewer id="chart" model="9acd6d0b-0903-477e-9a3c-ff9a55a6df25" turntable="0" gesturehandling="superior" exposure="1.5" enableapi="1" showinteractionprompt="0"></vctr-viewer>
<script type="module">

import { VctrApi } from "https://www.vectary.com/viewer-api/v1/api.js";

async function run() {    

    function errHandler(err) {
        // console.log("API error", err);
    }

    async function onReady() {
      // console.log("API ready");
      try {
        
        const allSceneObjects = await vctrApi.getObjects();
        // console.log("Objects", allSceneObjects); 


        var chart1numbers = [144901, 1303019, 5177044, 2852563];
        var chart2numbers = [180000, 2400000, 5800000, 8100000];
        var chartCurrent = [1,1,1,1];

        await vctrApi.setVisibility("barExpected", true, false);
        await vctrApi.setVisibility("chart1", true, false);
        await vctrApi.setVisibility("chart2", false, false);

        setTimeout(function() {
          initFirstChart();
          button1Clicked();
        }, 3000);

        let globalRotX = 0;
        let globalRotY = 0;

        const rangeTune = 0.05; // used to finetune rotation range
        
        var currentHighlighted;
        var currentActive;
        var buttonDefaultScale = 0.0202139;

        document.addEventListener("mousemove", async e => {
            const normX = e.clientX / window.innerWidth;
            const normY = e.clientY / window.innerHeight;

            const rotX = (rangeTune * (normX - 0.5));
            const rotY = (rangeTune * (normY - 0.5));

            vctrApi.rotateView([rotX - globalRotX, rotY - globalRotY]);

            globalRotX = rotX;
            globalRotY = rotY;

            var highlighted = await vctrApi.getHitObjects();
           
            // console.log(currentHighlighted);
           
            if ((highlighted.length) && (highlighted[0].name...