Skip to content

Commit

Permalink
Merge branch 'dashboard_fixes' into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@hartym
hartym committed Jun 14, 2024
2 parents 3a7f977 + a038b1d commit de99ce9
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 60 deletions.
7 changes: 3 additions & 4 deletions harp_apps/dashboard/frontend/src/Pages/Transactions/Components/Facets/RangeSliderFacet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@ import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline"
import { useState } from "react"

import { MinMaxFilter } from "Types/filters"
import { RangeSlider, Mark } from "ui/Components/Slider/RangeSlider.tsx"
import { Mark, RangeSlider } from "ui/Components/Slider/RangeSlider.tsx"
import { H5 } from "ui/Components/Typography"

import { FacetInnerLightButton } from "./FacetInnerLightButton.tsx"

interface RangeSliderFacetProps {
title: string
name: string
type: "rangeSlider"
defaultOpen?: boolean
values?: MinMaxFilter
setValues: (value?: MinMaxFilter) => void
Expand Down Expand Up @@ -50,10 +49,10 @@ export function RangeSliderFacet({
min={min}
max={max}
step={10}
defaultValue={values}
defaultValue={values ?? {}}
onPointerUp={setValues}
marks={marks}
thumbSize="8px"
thumbSize="16px"
/>
</div>
</fieldset>
Expand Down
27 changes: 15 additions & 12 deletions harp_apps/dashboard/frontend/src/Pages/Transactions/Containers/FiltersSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useLocation, useNavigate, useSearchParams } from "react-router-dom"

import { apdexScale } from "Components/Badges/constants"
import { useTransactionsFiltersQuery } from "Domain/Transactions"
import { Filters, ArrayFilter, MinMaxFilter } from "Types/filters"
import { ArrayFilter, Filters, MinMaxFilter } from "Types/filters"
import { Pane } from "ui/Components/Pane"

import { Facet, RangeSliderFacet } from "../Components/Facets"
Expand All @@ -19,18 +19,22 @@ export function FiltersSidebar({ filters }: FiltersSidebarProps) {
const filtersQuery = useTransactionsFiltersQuery()

// marks and setup for range slider for tpdex
const marks = [...apdexScale]
.reverse()
.map((rating, index) => ({ value: index * 10, label: rating.label, className: rating.className }))
const markValueToThreshold = new Map([...apdexScale].reverse().map((rating, index) => [index * 10, rating.threshold]))
const marks = [...apdexScale].map((rating, index) => ({
value: index * 10,
label: rating.label,
className: rating.className,
}))
const markValueToThreshold = new Map([...apdexScale].map((rating, index) => [index * 10, rating.threshold]))
const maxKey = Math.max(...Array.from(markValueToThreshold.keys()))
const minKey = Math.min(...Array.from(markValueToThreshold.keys()))
markValueToThreshold.set(maxKey, undefined)
markValueToThreshold.set(minKey, undefined)

const thresholdToMarkValue = new Map<number, number>()
markValueToThreshold.forEach((value, key) => {
if (value != undefined) thresholdToMarkValue.set(value, key)
if (value != undefined) {
thresholdToMarkValue.set(value, key)
}
})

const _createSetFilterFor = (name: string) => (value: ArrayFilter) => {
Expand All @@ -53,8 +57,8 @@ export function FiltersSidebar({ filters }: FiltersSidebarProps) {
}

const setTpdexValues = (value: MinMaxFilter | undefined) => {
const minValue = markValueToThreshold.get(value?.min ?? -1)
const maxValue = markValueToThreshold.get(value?.max ?? -1)
const maxValue = markValueToThreshold.get(value?.min ?? -1)
const minValue = markValueToThreshold.get(value?.max ?? -1)

if (minValue != null) {
searchParams.set("tpdexmin", minValue.toString())
Expand Down Expand Up @@ -130,14 +134,13 @@ export function FiltersSidebar({ filters }: FiltersSidebarProps) {

{filtersQuery.isSuccess ? (
<RangeSliderFacet
title="Performance Index"
title="Performances Index"
name="performanceIndex"
values={{
min: thresholdToMarkValue.get((filters["tpdex"] as MinMaxFilter)?.min ?? 0),
max: thresholdToMarkValue.get((filters["tpdex"] as MinMaxFilter)?.max ?? 100),
min: thresholdToMarkValue.get((filters["tpdex"] as MinMaxFilter)?.max ?? 0),
max: thresholdToMarkValue.get((filters["tpdex"] as MinMaxFilter)?.min ?? 100),
}}
setValues={setTpdexValues}
type={"rangeSlider"}
marks={marks}
max={maxKey}
min={minKey}
Expand Down
54 changes: 27 additions & 27 deletions ...ard/frontend/src/Pages/Transactions/Containers/__snapshots__/FiltersSidebar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -595,7 +595,7 @@ exports[`renders the title and data when the query is successful 1`] = `
<span
class="grow"
>
Performance Index
Performances Index
<button
class="text-gray-400 mx-1 font-medium text-xs"
>
Expand Down Expand Up @@ -623,21 +623,21 @@ exports[`renders the title and data when the query is successful 1`] = `
class="mt-2 space-y-2 "
>
<div
class="css-1atudf3"
class="css-1tvrs2d"
>
<div
class="css-1mb4ltm"
class="css-1bggt6d"
>
<input
class="input css-1mns3hn"
class="input css-9ckkig"
max="80"
min="0"
step="10"
type="range"
value="0"
/>
<input
class="input css-1mns3hn"
class="input css-9ckkig"
max="80"
min="0"
step="10"
Expand All @@ -646,72 +646,72 @@ exports[`renders the title and data when the query is successful 1`] = `
/>
</div>
<div
class="css-ey7eqm"
class="css-1yxx0tz"
>
<div
class="css-o6dulo"
class="css-14pv6h1"
style="left: 0%;"
/>
<div
class="css-8tc5wm"
class="css-8op6yf"
>
<div
class="css-18vir86"
class="css-fhc53s"
style="left: 0%; right: 0%;"
/>
<div
style="position: absolute; left: 0%; top: 50%;"
>
<div
class="bg-red-700 css-mb7ol4"
class="bg-teal-400 css-1mbp5y2"
/>
<div
class="css-rx8plc"
>
G
A++
</div>
</div>
<div
style="position: absolute; left: 12.5%; top: 50%;"
>
<div
class="bg-red-500 css-1v10j1i"
class="bg-emerald-400 css-8d6cle"
/>
<div
class="css-rx8plc"
>
F
A+
</div>
</div>
<div
style="position: absolute; left: 25%; top: 50%;"
>
<div
class="bg-orange-500 css-13g6xzh"
class="bg-green-500 css-tsujdb"
/>
<div
class="css-rx8plc"
>
E
A
</div>
</div>
<div
style="position: absolute; left: 37.5%; top: 50%;"
>
<div
class="bg-amber-500 css-16v1ij1"
class="bg-lime-500 css-1lvmgf3"
/>
<div
class="css-rx8plc"
>
D
B
</div>
</div>
<div
style="position: absolute; left: 50%; top: 50%;"
>
<div
class="bg-yellow-500 css-c8mre4"
class="bg-yellow-500 css-1tqf926"
/>
<div
class="css-rx8plc"
Expand All @@ -723,53 +723,53 @@ exports[`renders the title and data when the query is successful 1`] = `
style="position: absolute; left: 62.5%; top: 50%;"
>
<div
class="bg-lime-500 css-xywqyw"
class="bg-amber-500 css-1dfhn4m"
/>
<div
class="css-rx8plc"
>
B
D
</div>
</div>
<div
style="position: absolute; left: 75%; top: 50%;"
>
<div
class="bg-green-500 css-3wj4yg"
class="bg-orange-500 css-12ueco"
/>
<div
class="css-rx8plc"
>
A
E
</div>
</div>
<div
style="position: absolute; left: 87.5%; top: 50%;"
>
<div
class="bg-emerald-400 css-t3aoyt"
class="bg-red-500 css-1ksflql"
/>
<div
class="css-rx8plc"
>
A+
F
</div>
</div>
<div
style="position: absolute; left: 100%; top: 50%;"
>
<div
class="bg-teal-400 css-j4awuo"
class="bg-red-700 css-eb9nog"
/>
<div
class="css-rx8plc"
>
A++
G
</div>
</div>
</div>
<div
class="css-o6dulo"
class="css-14pv6h1"
style="left: 100%;"
/>
</div>
Expand Down
44 changes: 27 additions & 17 deletions harp_apps/dashboard/frontend/src/ui/Components/Slider/RangeSlider.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react"
import { styled, css } from "twin.macro"
import tw, { css, styled } from "twin.macro"

export type Mark = number | { value: number; label: string; className?: string }

Expand All @@ -26,7 +26,7 @@ const thumbStyles = ({ thumbSize }: { thumbSize: string }) => css`
pointer-events: all;
width: ${thumbSize};
height: ${thumbSize};
border-radius: 0px;
border-radius: 0;
border: 0 none;
background-color: blue;
cursor: grab;
Expand Down Expand Up @@ -91,17 +91,15 @@ const Rail = styled.div`
transform: translateY(-50%);
height: 6px;
border-radius: 3px;
background: lightgrey;
background: ${tw`bg-gray-200`};
`}
`

const InnerRail = styled.div`
${css`
position: absolute;
height: 100%;
background: blue;
opacity: 0.5;
`}
position: absolute;
height: 100%;
opacity: 0.5;
${tw`bg-primary-200`}
`

const Control = styled.div(
Expand All @@ -110,11 +108,12 @@ const Control = styled.div(
height: ${thumbSize};
border-radius: 50%;
position: absolute;
background: blue;
${tw`bg-primary-900`};
top: 50%;
margin-left: calc(${thumbSize} / -2);
transform: translate3d(0, -50%, 0);
z-index: 2;
${tw`ring-1 ring-white`}
`,
)

Expand All @@ -123,13 +122,14 @@ const Mark = styled.div(
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
width: 10px;
height: 10px;
border-radius: 50%;
${className &&
css`
@apply ${className};
`}
${tw`ring-1 ring-white`}
`,
)

Expand Down Expand Up @@ -186,21 +186,31 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
}, [max, min, value, defaultValue])

const handlePointerUp = () => {
if (onPointerUp) onPointerUp({ min: minValue, max: maxValue })
if (onPointerUp) {
onPointerUp({ min: minValue, max: maxValue })
}
}

const handleMinChange = (e: React.ChangeEvent<HTMLInputElement>) => {
e.preventDefault()
const newMinVal = Math.min(Number(e.target.value), maxValue - step)
if (!value) setMinValue(newMinVal)
if (onChange) onChange({ min: newMinVal, max: maxValue })
if (!value) {
setMinValue(newMinVal)
}
if (onChange) {
onChange({ min: newMinVal, max: maxValue })
}
}

const handleMaxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
e.preventDefault()
const newMaxVal = Math.max(Number(e.target.value), minValue + step)
if (!value) setMaxValue(newMaxVal)
if (onChange) onChange({ min: minValue, max: newMaxVal })
if (!value) {
setMaxValue(newMaxVal)
}
if (onChange) {
onChange({ min: minValue, max: newMaxVal })
}
}
const minPos = ((minValue - min) / (max - min)) * 100
const maxPos = ((maxValue - min) / (max - min)) * 100
Expand Down
Binary file modified ...oard/frontend/src/ui/tests/snapshot.spec.ts-snapshots/slider--default-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit de99ce9

Please sign in to comment.