va-project/stockingly-frontend/src/components/StockPrice.vue

<template>
  <v-card variant="outlined">
    <v-card-item>
      <v-card-title>Stock price over time</v-card-title>
    </v-card-item>
    <v-card-text>
      <div class="toolbar mb-3">
        <v-btn-toggle class="toggles" v-model="timeToggle" color="secondary" mandatory>
          <v-btn value="1M">1M</v-btn>
          <v-btn value="3M">3M</v-btn>
          <v-btn value="6M">6M</v-btn>
          <v-btn value="1Y">1Y</v-btn>
          <v-btn value="5Y">5Y</v-btn>
          <v-btn value="MAX">Max</v-btn>
        </v-btn-toggle>
        <strong class="label">Current price:</strong>
        <div class="chips">
          <v-chip class="ma-1 max-price" v-for="ticker in tickers" :key="ticker" :color="getTickerColor(ticker)" size="large"
            variant="outlined">
            {{ ticker }}: ${{ maxPrice[ticker] }}
          </v-chip>
        </div>
      </div>
      <v-skeleton-loader class="chart-loader" v-if="stockPrice.loading" />
      <ag-charts-vue class="chart" v-else :options="options" />
    </v-card-text>
  </v-card>
</template>

<style scoped>
.toolbar {
  display: flex;
  gap: 10px;
  flex-direction: row;
  align-items: center;
}

.max-price {
  background-color: white !important;
}

.toolbar .toggles {
  flex: 1 0;
}

.toolbar .chips,
.toolbar .label {
  flex: 0 0;
  text-align: center;
}
</style>

<script setup lang="ts">
import { AgChartsVue } from 'ag-charts-vue3';
import { PriceHistory, getPriceHistory } from '@/api';
import { defineLoader } from '@/api/loader';
import { time, AgAxisLabelFormatterParams } from 'ag-charts-community';
import { TimeInterval } from 'ag-charts-community/dist/cjs/es5/util/time/interval';
import { DurationLike, DateTime } from 'luxon';
import { roundTo } from 'round-to';
import { computed, ref, onMounted } from 'vue';

const props = defineProps<{
  tickers: string[],
  colors: string[]
}>();

type TimeOptions = '1M' | '3M' | '6M' | '1Y' | '5Y' | 'MAX';

const timeToggle = ref<TimeOptions>('1M');

const stockPrice = defineLoader<PriceHistory[]>(() => getPriceHistory(props.tickers));

const optToDuration: Record<TimeOptions, [DurationLike | undefined, TimeInterval, string]> = {
  '1M': [{ months: 1 }, time.day, '%d'],
  '3M': [{ months: 3 }, time.friday, '%m-%d'],
  '6M': [{ months: 6 }, time.friday.every(2), '%m-%d'],
  '1Y': [{ years: 1 }, time.month, '%Y-%m'],
  '5Y': [{ years: 5 }, time.month.every(3, {
    snapTo: DateTime.utc(2000, 1, 1).toJSDate() // snap to solar year quarters
  }), '%Y-%m'],
  'MAX': [undefined, time.year.every(2), '%Y']
};

const getTickerColor = (ticker: string) => props.colors[props.tickers.indexOf(ticker)];

const minDates = (data: PriceHistory[]) => {
  const toReturn = Object.fromEntries(props.tickers.map(t => [t, +Infinity]));

  for (const d of data ?? []) {
    for (const key in d) {
      if (key === 'date' || typeof d[key] !== 'number') continue;
      if (Date.parse(d.date) < toReturn[key]) {
        toReturn[key] = Date.parse(d.date);
      }
    }
  }

  console.log(toReturn);

  return toReturn;
};

const maxPrice = computed(() => {
  const maxVal = Object.fromEntries(props.tickers.map(t => [t, NaN]));
  let maxDate = -Infinity;

  if (stockPrice.loading) return maxVal;

  for (const d of stockPrice.data ?? []) {
    if (Date.parse(d.date) > maxDate) {
      maxDate = Date.parse(d.date);
      for (const ticker in maxVal) {
        if (typeof d[ticker] === 'number' && !isNaN(d[ticker] as number)) {
          maxVal[ticker] = d[ticker] as number;
        }
      }
    }
  }

  for (const ticker in maxVal) {
    maxVal[ticker] = roundTo(maxVal[ticker], 2);
  }

  return maxVal;
})

const options = computed(() => {
  if (stockPrice.loading) return null;

  const maxDate = DateTime.now();
  const opts = optToDuration[timeToggle.value];
  const minDate = opts[0] ? maxDate.minus(opts[0]) : undefined;

  const renderer = (params: any) => ({
    title: params.title,
    content: DateTime.fromMillis(params.xValue).toISODate() + ': ' + roundTo(params.yValue, 2),
  });

  return {
    theme: 'ag-material',
    data: stockPrice.data?.map(e => ({ ...e, date: Date.parse(e.date) })),
    series: props.tickers.map((t: string) => ({
      xKey: 'date',
      yKey: t,
      yName: t,
      stroke: getTickerColor(t),
      tooltip: { renderer: renderer },
      marker: {
        size: timeToggle.value == '1M' || timeToggle.value == '3M' ? 5 : 1,
        fill: getTickerColor(t),
        stroke: getTickerColor(t)
      }
    })),
    axes: [
      {
        type: 'time',
        position: 'bottom',
        min: minDate?.toJSDate(),
        max: maxDate.toJSDate(),
        tick: {
          interval: opts[1]
        },
        label: {
          autoRotate: true,
          autoRotateAngle: 335,
          format: opts[2]
        },
        gridStyle: [{
          lineDash: [Infinity]
        }, {
          lineDash: [Infinity]
        }],
        title: {
          enabled: true,
          text: 'Closing date' 
        },
        crossLines: Object.entries(minDates(stockPrice.data ?? []))
          .map(([key, value]: [string, number]) => ({
            type: 'line',
            value,
            label: {
              text: key + ' IPO',
              position: 'top',
            }
          }))
      },
      {
        type: 'number',
        position: 'left',
        min: 0,
        label: {
          format: '$~s',
          formatter: (params: AgAxisLabelFormatterParams) =>
            params?.formatter?.(params.value)
              .replace('y', '')
              .replace('k', 'K')
              .replace('G', 'B') ?? '' 
        },
        gridStyle: [{
          lineDash: [Infinity]
        }, {
          lineDash: [Infinity]
        }],
        title: {
          enabled: true,
          text: 'Amount in USD' 
        },
      },
    ],
    legend: {
      position: 'bottom',
    },

  };
});

onMounted(() => {
  stockPrice.load();
});
</script>