Demo Santoro - affects visualization task

by morphcast

HTML

<script src="https://sdk.morphcast.com/mph-data-storage/dev/mphdatastorage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<div class="doughnut">
  <div class="doughnutChartContainer">
    <canvas id="doughnutChart1" height="450"></canvas>
  </div>
</div>
<div class="doughnut">
  <div class="doughnutChartContainer">
    <canvas id="doughnutChart2" height="450"></canvas>
  </div>
</div>

CSS

.doughnut {
  padding: 100px 5px;
  background-color: white;
  font-family: calibri;
  height: 350px;
}

.doughnutChartContainer {
  background-color: white;
  width: 450px
}

JavaScript

const VIDEO_NAME = "video3";
const DEMO_NAME = "demo1";
const USER_NAME = "noUser";
const DATE_SELECTED = "2021-10-13";

const LICENSE_KEY = "9087cfd2037a28a79769fdcaa4962252379cd2e2fd0b";
const API_KEY = "kkkk";

window.globals = window.globals || {};
window.globals.__API_ENDPOINT__ =
  "https://54ad0beqcf.execute-api.eu-central-1.amazonaws.com/stage";


const getToken = () =>
  fetch(`${window.globals.__API_ENDPOINT__}/login`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      licenseKey: LICENSE_KEY,
      apiKey: API_KEY,
      prefix: `${DEMO_NAME}-${USER_NAME}`,
    }),
  })
  .then((resp) => {
    if (resp.ok) {
      return resp.json();
    } else {
      throw resp;
    }
  })
  .then(({
    token
  }) => token);

const getDataStorageConfig = () => {
  return getToken().then((token) => {
    return {
      token,
      conf: {
        endpoint: window.globals.__API_ENDPOINT__,
        prefix: `${DEMO_NAME}-${USER_NAME}`,
        onAuthError: () => getToken,
      },
    };
  });
};

getDataStorageConfig().then(async ({
  token,
  conf
}) => {

  const axiosInstance = axios.create({
    baseURL: conf.endpoint,
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  const getData = (variablePrefix) => {
    return axiosInstance
      .post("/data/query", {
        variablePrefix
      })
      .then((response) => {
        console.log(response);
        return response.data;
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const analyticsDelimiter = "!";
  const variableName = [
    `${conf.prefix}-${VIDEO_NAME}-Analytics`,
    DATE_SELECTED
  ].join(analyticsDelimiter);
  console.log("variableName", variableName);
  myData = await getData(variableName);
  console.log(myData);

  const affectsData = reduceValuesOfKeys(myData, affectsKeysToConsider);
  //console.log(affectsData);
  //console.log(reduceValuesOfKeys(myData,...