graphs-supported-by-solidui.md

Solid UI is basically a fork of shadcn/ui for solidjs, it uses the exact same components and props. The only difference is that they add a couple new components, specifically

Progress Circle

Visual element to indicate progress, performance, or status represented in a circular shape.

import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar"
import { Card } from "~/components/ui/card"
import { ProgressCircle } from "~/components/ui/progress-circle"
 
export function ProgressCircleDemo() {
  return (
    <div class="flex flex-col items-center gap-3">
      <p class="text-sm text-muted-foreground"> Without children </p>
      <Card class="p-4">
        <div class="flex items-center justify-start space-x-5">
          <ProgressCircle value={75} />
          <div>
            <p class="text-tremor-default text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">
              $340/$450 (75%)
            </p>
            <p class="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
              Spend management control
            </p>
          </div>
        </div>
      </Card>
      <p class="text-sm text-muted-foreground">Progress value as children</p>
      <Card class="mx-auto max-w-sm p-4">
        <div class="flex items-center justify-start space-x-5">
          <ProgressCircle value={75}>
            <span class="text-xs font-medium text-slate-700">75%</span>
          </ProgressCircle>
          <div>
            <p class="text-tremor-default text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">
              $340/$450 (75%)
            </p>
            <p class="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
              Spend management control
            </p>
          </div>
        </div>
      </Card>
      <p class="text-sm text-muted-foreground"> Avatar as children </p>
      <Card class="mx-auto max-w-sm p-4">
        <div class="flex items-center justify-center space-x-5">
          <ProgressCircle value={75}>
            <Avatar class="size-12">
              <AvatarImage src="https://github.com/sek-consulting.png" />
              <AvatarFallback>EK</AvatarFallback>
            </Avatar>
          </ProgressCircle>
          <div>
            <p class="text-tremor-default text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">
              $340/$450 (75%)
            </p>
            <p class="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
              Spend management control
            </p>
          </div>
        </div>
      </Card>
    </div>
  )
}

Bar List

Horizontal bars with a customizable label inside.

import {
  IconBrandGithub,
  IconBrandGoogle,
  IconBrandReddit,
  IconBrandX,
  IconBrandYoutube
} from "~/components/icons"
import { BarList } from "~/components/ui/bar-list"
import { Card } from "~/components/ui/card"
 
export function BarListDemo() {
  const data = [
    {
      name: "Twitter",
      value: 456,
      href: "https://twitter.com/tremorlabs",
      icon: IconBrandX
    },
    {
      name: "Google",
      value: 351,
      href: "https://google.com",
      icon: IconBrandGoogle
    },
    {
      name: "GitHub",
      value: 271,
      href: "https://github.com/tremorlabs/tremor",
      icon: IconBrandGithub
    },
    {
      name: "Reddit",
      value: 191,
      href: "https://reddit.com",
      icon: IconBrandReddit
    },
    {
      name: "Youtube",
      value: 91,
      href: "https://www.youtube.com/@tremorlabs3079",
      icon: IconBrandYoutube
    }
  ]
  return (
    <Card class="mx-auto w-96 p-5">
      <h3 class="font-medium">Website Analytics</h3>
      <p class="mt-4 flex items-center justify-between text-muted-foreground">
        <span>Source</span>
        <span>Views</span>
      </p>
      <BarList data={data} class="mt-2" />
    </Card>
  )
}

Charts

A collection of different chart components using chart.js

Line Chart

import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
import { LineChart } from "~/components/ui/charts"
 
export function AreaChartDemo() {
  const chartData = {
    labels: [
      "Jan 22",
      "Feb 22",
      "Mar 22",
      "Apr 22",
      "May 22",
      "Jun 22",
      "Jul 22",
      "Aug 22",
      "Sep 22",
      "Oct 22",
      "Nov 22",
      "Dec 22"
    ],
    datasets: [
      {
        label: "SemiAnalysis",
        data: [2890, 2756, 3322, 3470, 3475, 3129, 3490, 2903, 2643, 2837, 2954, 3239],
        fill: true
      },
      {
        label: "The Pragmatic Engineer",
        data: [2338, 2103, 2194, 2108, 1812, 1726, 1982, 2012, 2342, 2473, 3848, 3736],
        fill: true
      }
    ]
  }
  return (
    <Card>
      <CardHeader>
        <CardTitle>Newsletter revenue over time (USD)</CardTitle>
      </CardHeader>
      <CardContent class="h-64 w-[500px] max-w-full">
        <LineChart data={chartData} />
      </CardContent>
    </Card>
  )
}

Pie Chart

import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
import { PieChart } from "~/components/ui/charts"
 
export function PieChartDemo() {
  const chartData = {
    labels: ["New York", "London", "Hong Kong", "San Francisco", "Singapore", "Zurich"],
    datasets: [
      {
        data: [9800, 4567, 3908, 2400, 1908, 1398]
      }
    ]
  }
  return (
    <Card>
      <CardHeader>
        <CardTitle>Sales</CardTitle>
      </CardHeader>
      <CardContent class="size-[200px]">
        <PieChart data={chartData} />
      </CardContent>
    </Card>
  )
}

Bar Chart

import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
import { BarChart } from "~/components/ui/charts"
 
export function BarChartDemo() {
  const chartData = {
    labels: ["Amphibians", "Birds", "Crustaceans", "Ferns", "Arachnids", "Corals", "Algae"],
    datasets: [
      {
        label: "Number of threatened species",
        data: [2488, 1445, 734, 281, 251, 232, 98]
      }
    ]
  }
  return (
    <Card>
      <CardHeader>
        <CardTitle>Sales</CardTitle>
      </CardHeader>
      <CardContent class="h-64 w-[500px] max-w-full">
        <BarChart data={chartData} />
      </CardContent>
    </Card>
  )
}

Other charts

You can use all charts provided by chart.js:

• BarChart
• BubbleChart
• DonutChart
• LineChart
• PieChart
• PolarAreaChart
• RadarChart
• ScatterChart