Skip to content

Commit

Permalink
Merge pull request #75 from buggregator/hotfix/inspector-colors
Browse files Browse the repository at this point in the history
Fixes colors in timeline for inspector module
  • Loading branch information
butschster authored Nov 25, 2023
2 parents 3625071 + ff8fc3a commit 0efc318
Showing 1 changed file with 41 additions and 19 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { computed, Ref } from "vue";
import {computed, Ref} from "vue";
import {
InspectorSegment,
InspectorTransaction,
Expand Down Expand Up @@ -30,7 +30,7 @@ const transaction: Ref<InspectorTransaction> = computed(
);
const grid = computed(() => {
let { duration } = transaction.value;
let {duration} = transaction.value;
const totalCells = 5;
const width = duration / totalCells + 1;
Expand Down Expand Up @@ -59,10 +59,10 @@ const segments: Ref<InspectorSegment[]> = computed(() =>
.filter(
(
<T extends keyof InspectorItemType>(type: T) =>
(
action: InspectorItemType[keyof InspectorItemType]
): action is InspectorItemType[T] =>
action.model === type
(
action: InspectorItemType[keyof InspectorItemType]
): action is InspectorItemType[T] =>
action.model === type
)("segment")
)
.filter(
Expand All @@ -73,13 +73,13 @@ const segments: Ref<InspectorSegment[]> = computed(() =>
const segmentTypes = computed(() =>
[...new Set(segments.value.map((data) => data.type))].map((type) => ({
color: `bg-${segmentColor(type)}-600`,
color: segmentColor(type),
type,
}))
);
const series = computed(() => {
const { duration } = transaction.value;
const {duration} = transaction.value;
return segments.value.map((segment: InspectorSegment) => {
const widthPercent = Math.max(
Expand All @@ -93,7 +93,7 @@ const series = computed(() => {
widthPercent,
marginPercent,
segment,
color: `bg-${segmentColor(segment.type)}-600`,
color: segmentColor(segment.type),
};
});
});
Expand Down Expand Up @@ -153,7 +153,7 @@ const series = computed(() => {
class="inspector-page-timeline__series-segment-start"
>
<span class="inspector-page-timeline__series-segment-start-label"
>{{ row.segment.start }} ms</span
>{{ row.segment.start }} ms</span
>
</div>
<div
Expand Down Expand Up @@ -200,10 +200,6 @@ const series = computed(() => {
@apply w-4 h-4 rounded mr-2;
}
.inspector-page-timeline__segment-type__label {
@apply text-xs font-bold;
}
.inspector-page-timeline__segments {
@apply overflow-x-scroll border border-gray-50 dark:border-gray-600;
}
Expand All @@ -222,23 +218,24 @@ const series = computed(() => {
.dark .inspector-page-timeline__series {
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 0.04) 1px,
transparent 1px
to right,
rgba(255, 255, 255, 0.04) 1px,
transparent 1px
);
}
.inspector-page-timeline__series-segment {
@apply mt-5 text-right;
@apply mt-4 text-right;
}
.inspector-page-timeline__series-segment-label {
@apply text-2xs md:text-xs font-bold whitespace-nowrap;
@apply text-2xs md:text-xs font-bold whitespace-nowrap pr-2 pb-1;
}
.inspector-page-timeline__series-segment-start {
@apply flex items-center justify-end;
}
.inspector-page-timeline__series-segment-end,
.inspector-page-timeline__series-segment-start {
background-color: rgba(177 177 177 / 17%);
Expand Down Expand Up @@ -275,4 +272,29 @@ const series = computed(() => {
.inspector-page-timeline__no-segments-placeholder {
@apply text-lg md:text-xl lg:text-3xl mt-5 font-bold text-gray-300;
}
.inspector-page-timeline__series-segment-time,
.inspector-page-timeline__segment-type__color-box {
@apply bg-gray-600;
}
.inspector-page-timeline__series-segment-time.orange,
.inspector-page-timeline__segment-type__color-box.orange {
@apply bg-orange-600;
}
.inspector-page-timeline__series-segment-time.blue,
.inspector-page-timeline__segment-type__color-box.blue {
@apply bg-blue-600;
}
.inspector-page-timeline__series-segment-time.purple,
.inspector-page-timeline__segment-type__color-box.purple {
@apply bg-purple-600;
}
.inspector-page-timeline__segment-type__label {
@apply text-xs font-bold;
}
</style>

0 comments on commit 0efc318

Please sign in to comment.