@bagelink/vue 0.0.282 → 0.0.287

package/src/components/charts/BarChart.vue

@@ -1,301 +0,0 @@
-<template>
-  <div class="bar-chart">
-    <div class="graph-wrap" v-for="(item, i) in dataArray" :key="i">
-      <div class="group-wrap" v-if="item.group">
-        <p class="group-title">
-          {{ item.group }}
-        </p>
-        <div v-for="(nested, i) in item?.data || []" :key="i" class="bar-wrap">
-          <div
-            class="bar"
-            :style="{ height: loaded ? `${percent(nested.value)}%` : '0' }"
-          />
-          <div
-            class="bar compare"
-            v-if="nested.compareValue"
-            :style="{
-              height: loaded ? `${percent(nested.compareValue)}%` : '0',
-            }"
-          />
-          <!-- <p class="bar-txt">{{ nested.title }}</p> -->
-        </div>
-      </div>
-      <div v-else class="bar-wrap">
-        <div
-          class="bar"
-          :style="{ height: loaded ? `${percent(item.value)}%` : '0' }"
-        />
-        <div
-          class="bar compare"
-          v-if="item?.compareValue"
-          :style="{ height: loaded ? `${percent(item.compareValue)}%` : '0' }"
-        />
-        <p class="bar-txt">
-          {{ item.title }}
-        </p>
-      </div>
-    </div>
-    <p class="factor">
-      {{ title }}
-    </p>
-    <div class="red-bar" />
-    <div class="bar-lines">
-      <p v-for="mark in marks" :key="mark">
-        {{ mark.toLocaleString() }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
-
-const props = defineProps<{
-  title?: string;
-  showMarks?: boolean;
-  flood?: number;
-  modelValue: {
-    value: number;
-    title?: string;
-    compareValue?: number;
-    group?: string;
-    data?: Record<string, any>[];
-  }[];
-  // | {
-  //   group: string;
-  //   data: {
-  //     value: number;
-  //     title: string;
-  //     compareValue?: number | undefined;
-  //     group?: string | undefined;
-  //     data?: Record<string, any>[] | undefined;
-  //   }[]
-  // }[]
-}>();
-const loaded = ref(false);
-
-onMounted(() => {
-  setTimeout(() => {
-    loaded.value = true;
-  }, 400);
-});
-
-const dataArray = computed(
-  () => props.modelValue
-  // const allData = []
-  // for (const item of props.modelValue) {
-  //   if (item.group) {
-  //     let groupIndex = allData.findIndex(d => d.group === item.group)
-  //     if (groupIndex > -1) allData[groupIndex].data?.push(item);
-  //     else allData.push({ group: item.group, data: [item] })
-  //   } else {
-  //     allData.push(item)
-  //   }
-  // }
-  // return allData;
-);
-
-const maxValue = computed(() =>
-  Math.ceil(
-    Math.max(
-      ...dataArray.value.map((d) => d.value),
-      ...dataArray.value.map((d) => d?.compareValue || 0)
-    )
-  )
-);
-
-const marks = computed(() => {
-  const marksArray: number[] = [];
-  for (let i = 0; i <= 5; i += 1) {
-    const step = (i * maxValue.value) / 5;
-    marksArray.push(Math.round(step / 10) * 10);
-  }
-  return marksArray;
-});
-
-const percent = (val: number) => (val / maxValue.value) * 100;
-const floodPercent = computed(() => `${props.flood}%`);
-</script>
-
-<style scoped>
-/* .group-wrap * {
-  outline: 1px solid red;
-} */
-
-.group-wrap {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 2px;
-}
-
-.group-wrap .bar-wrap {
-  gap: 2px;
-}
-
-.group-title {
-  font-size: 0.6em;
-  width: 100%;
-}
-
-.bar-txt {
-  font-size: 11px;
-  font-weight: 200;
-  /* max-width: 95%; */
-  width: max-content;
-  height: 20px;
-  line-height: 1.2;
-  margin: 5px auto 0;
-  position: absolute;
-  transform: rotate(300deg);
-  transform-origin: 40px 40px;
-}
-
-.graph-wrap {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  padding: 0 10px;
-}
-
-.bar-wrap {
-  text-align: center;
-  height: 100%;
-  /* flex: 0 1 16.6%; */
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  position: relative;
-}
-
-.bar {
-  background: var(--bgl-primary);
-  position: relative;
-  min-width: 10px;
-  min-height: 5px;
-  width: 4px;
-  margin: 0 auto;
-  transition: all ease-out 0.8s;
-}
-
-.bar.compare {
-  background-color: #cf2135;
-}
-
-.bar-chart {
-  height: calc(100vh - 500px);
-  width: 90%;
-  margin: 30px auto;
-  display: flex;
-  justify-content: space-between;
-  position: relative;
-}
-
-.graps .bar-chart {
-  aspect-ratio: 9/5;
-  height: auto;
-  max-height: calc(100vh - 500px);
-}
-
-.bar-lines {
-  position: absolute;
-  /* font-size: 20px; */
-  display: flex;
-  flex-direction: column-reverse;
-  top: -15px;
-  bottom: -12px;
-  left: -30px;
-  justify-content: space-between;
-  width: calc(100% + 20px);
-  text-align: start;
-}
-
-.bar-lines p {
-  margin: 0;
-  position: relative;
-}
-
-.bar-lines p::after {
-  content: "";
-  background: var(--bgl-primary-tint);
-  height: 1px;
-  position: absolute;
-  width: calc(100% - 20px);
-  margin: 14px 0 0 10px;
-  opacity: 0.5;
-}
-
-.bar-lines p:first-child:after {
-  content: "";
-  background: var(--bgl-primary-tint);
-  height: 1px;
-  position: absolute;
-  width: calc(100% - 10px);
-  margin: 8px 0 0 10px;
-  opacity: 0.5;
-}
-
-.red-bar {
-  background: #cf2135;
-  height: v-bind(floodPercent);
-  width: 100%;
-  position: absolute;
-  left: 0px;
-  bottom: 0;
-  opacity: 0.6;
-  transition: all 200ms ease;
-}
-
-.red-bar.open-redbar {
-  height: 7%;
-}
-
-.factor {
-  position: absolute;
-  transform: rotate(270deg);
-  height: 0px;
-  width: 0;
-  left: -60px;
-  font-size: 22px;
-  text-align: center;
-  white-space: nowrap;
-  top: 60%;
-}
-
-.dash-hor {
-  /* border-bottom: 1px dashed white; */
-  position: absolute;
-  background-image: linear-gradient(to right, #cf2134 53%, transparent 0%);
-  height: 10px;
-  bottom: 41.5%;
-  width: 100%;
-  animation: 1s linear 0s infinite dash;
-  background-position: left;
-  background-repeat: repeat-x;
-  background-size: 15px 4px;
-}
-
-.dash-hor::after {
-  content: "Average Speedup = 25x";
-  position: absolute;
-  left: 0;
-  bottom: 10px;
-  font-size: 22px;
-  background: #cf2134;
-  z-index: 2;
-  padding: 1px 4px;
-  border-radius: 3px;
-}
-
-@keyframes dash {
-  0% {
-    background-position: 0;
-  }
-
-  100% {
-    background-position: 15px;
-  }
-}
-</style>

package/src/components/charts/index.ts

@@ -1 +0,0 @@
-export { default as BarChart } from './BarChart.vue';