Allow filtering by date (YYYY-MM) #73

New Issue

2024-02-20T10:56:36Z

linus commented

2024-02-20 10:56:36 +00:00

It would be great if the graph could be filtered to, e.g. just the last 12 months.

A simple version of this basically:

https://cambridge-intelligence.com/time/

It would be great if the graph could be filtered to, e.g. just the last 12 months. A simple version of this basically: ![image](/attachments/1035b712-086b-4649-9c04-ff31fe1677b3) https://cambridge-intelligence.com/time/

image.png

98 KiB

linus changed title from ~~Allow filtering my date (YYYY-MM)~~ to Allow filtering by date (YYYY-MM)

2024-02-20 10:56:41 +00:00

linus added the

Priority

Medium

Kind/Feature labels 2024-02-20 10:56:52 +00:00

linus referenced this issue from TEDective/api

2024-02-24 11:47:27 +00:00

Allow filtering by date #13

linus added a new dependency 2024-02-24 11:48:12 +00:00

DeviceNeutrality/website#8 - Update dependency chart.js to v4.4.1

linus removed a dependency 2024-02-24 11:48:15 +00:00

DeviceNeutrality/website#8 - Update dependency chart.js to v4.4.1

linus added a new dependency 2024-02-24 11:48:20 +00:00

TEDective/api#13 - Allow filtering by date

~~linus referenced this issue from TEDective/api 2024-05-11 08:29:08 +00:00~~

Week 3 - API #19

linus referenced this issue from TEDective/api

2024-05-11 08:30:51 +00:00

Week 3 - API #19

nedas was assigned by micgor32

2024-05-24 17:55:20 +00:00

linus commented

2024-05-26 09:38:15 +00:00

This is probably the shadcn code we want to use:

from https://github.com/shadcn-ui/ui/issues/885#issuecomment-2059600641:

"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

import { cn } from "#/lib/utils"

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => {
  const initialValue = Array.isArray(props.value) ? props.value : [props.min, props.max]

  return (
    <SliderPrimitive.Root
      ref={ref}
      className={cn(
        "relative flex w-full touch-none select-none items-center",
        className
      )}
      {...props}
    >
      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
        <SliderPrimitive.Range className="absolute h-full bg-primary" />
      </SliderPrimitive.Track>
      {initialValue.map((value, index) => (
        <React.Fragment key={index}>
          <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
        </React.Fragment>
      ))}
    </SliderPrimitive.Root>
  )
})
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }

and its usage:

"use client"

export function PriceControl() {
  const [localValues, setLocalValues] = useState([0, 100_000])

  const handleValueChange = (newValues: any) => {
    setLocalValues(newValues)
  }

  return (
    <div className="grid gap-4 p-4 w-full max-w-80 bg-white border border-[#14424C]/20 rounded-[12px]">
      <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
        Preço
      </label>
      <Slider
        defaultValue={defaultValue}
        minStepsBetweenThumbs={10_000}
        max={300_000}
        min={0}
        step={1}
        onValueChange={handleValueChange}
        className={cn("w-full")}
      />
      <div className="flex gap-2 flex-wrap">
          <ol className="flex items-center w-full gap-3">
            {localValues.map((_, index) => (
              <li key={index} className="flex items-center justify-between w-full border px-3 h-10 rounded-md">
                <span>Km</span>
                <span>{localValues[index]}</span>
              </li>
            ))}
          </ol>
      </div>
    </div>
  )
}

This is probably the shadcn code we want to use: from https://github.com/shadcn-ui/ui/issues/885#issuecomment-2059600641: ```ts "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "#/lib/utils" const Slider = React.forwardRef< React.ElementRef<typeof SliderPrimitive.Root>, React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> >(({ className, ...props }, ref) => { const initialValue = Array.isArray(props.value) ? props.value : [props.min, props.max] return ( <SliderPrimitive.Root ref={ref} className={cn( "relative flex w-full touch-none select-none items-center", className )} {...props} > <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary"> <SliderPrimitive.Range className="absolute h-full bg-primary" /> </SliderPrimitive.Track> {initialValue.map((value, index) => ( <React.Fragment key={index}> <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" /> </React.Fragment> ))} </SliderPrimitive.Root> ) }) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } ``` and its usage: ```ts "use client" export function PriceControl() { const [localValues, setLocalValues] = useState([0, 100_000]) const handleValueChange = (newValues: any) => { setLocalValues(newValues) } return ( <div className="grid gap-4 p-4 w-full max-w-80 bg-white border border-[#14424C]/20 rounded-[12px]"> <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"> Preço </label> <Slider defaultValue={defaultValue} minStepsBetweenThumbs={10_000} max={300_000} min={0} step={1} onValueChange={handleValueChange} className={cn("w-full")} /> <div className="flex gap-2 flex-wrap"> <ol className="flex items-center w-full gap-3"> {localValues.map((_, index) => ( <li key={index} className="flex items-center justify-between w-full border px-3 h-10 rounded-md"> <span>Km</span> <span>{localValues[index]}</span> </li> ))} </ol> </div> </div> ) } ```

nedas commented

2024-06-12 20:54:21 +00:00

For current changes related to date filtering, refer to PR #79

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Depends on

#13 Allow filtering by date

TEDective/api

Reference: TEDective/ui#73