@bagelink/vue 0.0.160 → 0.0.164

package/src/components/charts/BarChart.vue

@@ -1,131 +1,116 @@
 <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>
+  <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';
+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;
-	//   }[]
-	// }[]
+  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);
+  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;
+  () => 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 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 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;
@@ -138,179 +123,179 @@ const floodPercent = computed(() => `${props.flood}%`);
 } */
 
 .group-wrap {
-	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-wrap: wrap;
-	gap: 2px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 2px;
 }
 
 .group-wrap .bar-wrap {
-	gap: 2px;
+  gap: 2px;
 }
 
 .group-title {
-	font-size: 0.6em;
-	width: 100%;
+  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;
+  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;
+  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;
+  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-blue);
-	position: relative;
-	min-width: 10px;
-	min-height: 5px;
-	width: 4px;
-	margin: 0 auto;
-	transition: all ease-out 0.8s;
+  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;
+  background-color: #cf2135;
 }
 
 .bar-chart {
-	height: calc(100vh - 500px);
-	width: 90%;
-	margin: 30px auto;
-	display: flex;
-	justify-content: space-between;
-	position: relative;
+  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);
+  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;
+  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;
+  margin: 0;
+  position: relative;
 }
 
 .bar-lines p::after {
-	content: "";
-	background: var(--bgl-blue-tint);
-	height: 1px;
-	position: absolute;
-	width: calc(100% - 20px);
-	margin: 14px 0 0 10px;
-	opacity: 0.5;
+  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-blue-tint);
-	height: 1px;
-	position: absolute;
-	width: calc(100% - 10px);
-	margin: 8px 0 0 10px;
-	opacity: 0.5;
+  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;
+  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%;
+  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%;
+  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;
+  /* 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;
+  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;
-	}
+  0% {
+    background-position: 0;
+  }
 
-	100% {
-		background-position: 15px;
-	}
+  100% {
+    background-position: 15px;
+  }
 }
 </style>