chartjs configuration

chart.ts

//https://www.chartjs.org/docs/latest/getting-started/
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Tooltip,
  Filler,
  Legend,
);

function createGrad(ctx: CanvasRenderingContext2D, area: ChartArea) {
  return (color: string, start: number, end: number) => {
    const grad = ctx.createLinearGradient(0, area.top, 0, area.bottom);
    //since the gradiente alters opacity, we need to modify the last parameter
    //in the hsla string,ie. hsla(1,1,1,1) -> hsla(1,1,1,start), you can use rgba too,
    //it doesn't matter
    grad.addColorStop(0, cssToHsla(color, start));
    grad.addColorStop(1, cssToHsla(color, end));
    return grad;
  };
}

function centsToBrl(cents: number) {
  //function to format cents to brl ie 10000 -> R$ 100,00
}

const options = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      position: "bottom",
      labels: {
        usePointStyle: true,
      },
    },
    tooltip: {
      cornerRadius: 0,
      caretSize: 0,
      titleAlign: "center",
      backgroundColor: "black",
      usePointStyle: true,
      callbacks: {
        label: (context) => {
          let label = context.dataset.label || "";

          if (label) {
            label += ": ";
          }
          if (context.parsed.y !== null) {
            label += centsToBrl(context.parsed.y);
          }
          return label;
        },
      },
    },
  },
  interaction: {
    intersect: false,
    mode: "index",
  },
  elements: {
    point: {
      radius: 0,
      hitRadius: 20,
      hoverRadius: 5,
    },
    line: {
      borderWidth: 1,
      tension: 0.4,
    },
  },
  scales: {
    x: {
      grid: {
        display: false,
      },
    },
    y: {
      grid: {
        display: false,
      },
      ticks: {
        //hide y ticks on small screens,
        //we have a helper function for this,
        //you can just use the window object
        display: media.gtSm,
        callback: (raw) => centsToBrl(raw),
      },
    },
  },
};

//from the mono core api
const sheet = query.simulateRoi;

//colors store somewhere not sure, you can get the raw hexcode from figma
const theme = {};

const colors = [
  { color: theme.nano9.val, start: 0.4, end: 0.0 },
  { color: theme.red9.val, start: 1, end: 0.2 },
];

//labels are just some offset in months ie. 0 -> $currentMonth, 1 -> $nextMonth
const labels = sheet.graphs.labelSeries.value.map((e) => {
  const date = new Date();
  date.setMonth(new Date().getMonth() + Number(e));
  return date.toLocaleString("default", { month: "long" });
});

//we need to convert the sheet raw string to cents, so it can be properly displayed on the graph,
//that can be done by just removing everything that's not a number from the string
const values = sheet.graphs.valueSeries.map(({ label, value }) => ({
  label,
  value: value.map((e) => Number(e.replace(/\D/g, ""))),
}));


//haven't tested this setup bit in vanilla js, but should be something simiar to this
const ctx = document.getElementById("myChart");
const chart = new Chart(ctx, { type: "line", options });
const grad = createGrad(ctx, chart.chartArea);

const data = {
  labels,
  datasets: values.map(({ label, value }, i) => ({
    label,
    data: value,
    borderColor: colors[i].color,
    backgroundColor: grad(colors[i].color, colors[i].start, colors[i].end),
    pointBackgroundColor: colors[i].color,
    fill: true,
  })),
};

chart.data = data;
chart.update();

fragment.graphql

fragment Simulate on Listing {
  simulateRoi(input: $amount) {
    id
    inputs {
      value
    }
    outputs {
      label
      value
    }
    graphs {
      labelSeries {
        label
        value
      }
      valueSeries {
        label
        value
      }
    }
  }
  minInvestment
}