mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekay
4620297b84
Match the layout convention used elsewhere in the Hanzo / Liquidity stack
(pkgs/* for libraries, apps/* for consumer apps, templates/* for starters).
Layout changes:
pkgs/ ← code/{compiler,core,packages,ui,ui-admin}/
apps/ ← code/{admin-base,admin-tasks,demos,gui.hanzo.ai,
kitchen-sink*,sandbox,tests}/
templates/ ← code/starters/* (flattened — no more starters/ subdir)
Updated:
- package.json workspaces glob.
- All scripts/* path references (postinstall, format, repair, release,
sync-gui-versions, ci-serve, check-references, etc).
- ../../tasks/scripts/sync-admin-ui.sh — DEFAULT_SRC now points at
../gui/apps/admin-tasks (and scrubbed Tamagui mentions in comments).
- ~/work/hanzo/HANZO_BINARY.md doctrine doc.
- ~/work/hanzo/ui/pkg/ui/BASES.md framework-bases doc.
- gui CLAUDE.md, CONTRIBUTING.md.
- Memory entries.
Side-effect fix: ui-admin/src/primitives/index.ts now re-exports
PageShell from ../shell/PageShell. Several IAM identity pages
(GroupEdit, OrgEdit, GroupTree, UserEdit, RoleEdit) imported PageShell
from ./primitives — pre-existing barrel mismatch the test suite missed
because the smoke tests don't full-render. The rename surfaced it via
production build; back-compat re-export keeps both barrels working.
Verification:
- bun install: clean.
- ui-admin tests: 127/127 green.
- admin-tasks vite build: 721 KB JS / 213 KB gzip + 10 KB CSS, clean.
171 lines
4.5 KiB
TypeScript
171 lines
4.5 KiB
TypeScript
import { useMemo } from 'react'
|
|
import {
|
|
Bar,
|
|
VictoryAxis,
|
|
VictoryBar,
|
|
VictoryChart,
|
|
VictoryLine,
|
|
VictoryPie,
|
|
VictoryTooltip,
|
|
} from 'victory'
|
|
|
|
import { useThemeBuilderStore } from '../store/ThemeBuilderStore'
|
|
import { useVictoryTheme } from './useVictoryTheme'
|
|
|
|
const useIsShowing = () => {
|
|
return !useThemeBuilderStore().isCentered
|
|
}
|
|
|
|
const NullComponent = () => null
|
|
const nullElement = <NullComponent />
|
|
|
|
export const BarChart = () => {
|
|
const victoryTheme = useVictoryTheme()
|
|
const showing = useIsShowing()
|
|
|
|
const data = useMemo(
|
|
() => [
|
|
{ x: 1, y: 60 * (showing ? 1 : 0.5) },
|
|
{ x: 2, y: 34 * (showing ? 1 : 0.5) },
|
|
{ x: 3, y: 40 * (showing ? 1 : 0.5) },
|
|
{ x: 4, y: 100 * (showing ? 1 : 0.5) },
|
|
{ x: 5, y: 80 * (showing ? 1 : 0.5) },
|
|
{ x: 6, y: 87 * (showing ? 1 : 0.5) },
|
|
// { x: 7, y: 50 * (showing ? 1 : 0.5) },
|
|
// { x: 8, y: 120 * (showing ? 1 : 0.5) },
|
|
],
|
|
[showing]
|
|
)
|
|
|
|
return (
|
|
<VictoryChart
|
|
width={300}
|
|
height={200}
|
|
animate={{ duration: 300, easing: 'cubic' }}
|
|
theme={victoryTheme}
|
|
domainPadding={{ x: 0, y: 0 }}
|
|
// width={1}
|
|
>
|
|
{/* <VictoryAxis
|
|
tickLabelComponent={nullElement}
|
|
axisComponent={nullElement}
|
|
tickComponent={nullElement}
|
|
gridComponent={nullElement}
|
|
tickValues={data.map(({ x }) => x - 1)}
|
|
tickFormat={shortMonths}
|
|
padding={0}
|
|
width={0}
|
|
/> */}
|
|
<VictoryAxis
|
|
animate
|
|
tickLabelComponent={nullElement}
|
|
axisComponent={nullElement}
|
|
tickComponent={nullElement}
|
|
gridComponent={nullElement}
|
|
dependentAxis
|
|
tickFormat={(x) => `${x.toLocaleString()}`}
|
|
padding={0}
|
|
width={0}
|
|
height={0}
|
|
/>
|
|
<VictoryBar
|
|
padding={0}
|
|
animate={{ duration: 500, easing: 'cubic' }}
|
|
// cornerRadius={{ togglePreviewThemeItem: 12 }}
|
|
data={data}
|
|
labels={({ datum }) => `${datum.y.toLocaleString()} new users`}
|
|
labelComponent={<VictoryTooltip />}
|
|
barWidth={30}
|
|
// dataComponent={<Bar tabIndex={0} ariaLabel={({ datum }) => `x: ${datum.x}`} />}
|
|
/>
|
|
</VictoryChart>
|
|
)
|
|
}
|
|
|
|
export const LineChart = () => {
|
|
const victoryTheme = useVictoryTheme()
|
|
const showing = useIsShowing()
|
|
|
|
const data = useMemo(
|
|
() => [
|
|
{ x: 1, y: 60 * (showing ? 1 : 0.5) },
|
|
{ x: 2, y: 34 * (showing ? 1 : 0.5) },
|
|
{ x: 3, y: 40 * (showing ? 1 : 0.5) },
|
|
{ x: 4, y: 100 * (showing ? 1 : 0.5) },
|
|
{ x: 5, y: 80 * (showing ? 1 : 0.5) },
|
|
{ x: 6, y: 87 * (showing ? 1 : 0.5) },
|
|
// { x: 7, y: 50 * (showing ? 1 : 0.5) },
|
|
// { x: 8, y: 120 * (showing ? 1 : 0.5) },
|
|
],
|
|
[showing]
|
|
)
|
|
|
|
return (
|
|
<VictoryChart
|
|
width={400}
|
|
height={200}
|
|
animate={{ duration: 300, easing: 'cubic' }}
|
|
theme={victoryTheme}
|
|
domainPadding={{ x: 0, y: 0 }}
|
|
// width={1}
|
|
>
|
|
{/* <VictoryAxis
|
|
tickLabelComponent={nullElement}
|
|
axisComponent={nullElement}
|
|
tickComponent={nullElement}
|
|
gridComponent={nullElement}
|
|
tickValues={data.map(({ x }) => x - 1)}
|
|
tickFormat={shortMonths}
|
|
padding={0}
|
|
width={0}
|
|
/> */}
|
|
<VictoryAxis
|
|
animate
|
|
tickLabelComponent={nullElement}
|
|
axisComponent={nullElement}
|
|
tickComponent={nullElement}
|
|
gridComponent={nullElement}
|
|
dependentAxis
|
|
tickFormat={(x) => `${x.toLocaleString()}`}
|
|
padding={0}
|
|
width={0}
|
|
height={0}
|
|
/>
|
|
<VictoryLine
|
|
padding={0}
|
|
animate={{ duration: 500, easing: 'cubic' }}
|
|
// cornerRadius={{ togglePreviewThemeItem: 12 }}
|
|
data={data}
|
|
labels={({ datum }) => `${datum.y.toLocaleString()} new users`}
|
|
height={200}
|
|
labelComponent={<VictoryTooltip />}
|
|
// barWidth={40}
|
|
// dataComponent={<Line tabIndex={0} ariaLabel={({ datum }) => `x: ${datum.x}`} />}
|
|
/>
|
|
</VictoryChart>
|
|
)
|
|
}
|
|
|
|
export const NewMembersChart = () => {
|
|
const victoryTheme = useVictoryTheme()
|
|
const showing = useIsShowing()
|
|
return (
|
|
<VictoryPie
|
|
key={Math.random()}
|
|
theme={victoryTheme}
|
|
animate={{ duration: 500, easing: 'cubic' }}
|
|
height={200}
|
|
width={200}
|
|
data={useMemo(
|
|
() => [
|
|
{ x: 'A', y: showing ? 190 : 0 },
|
|
{ x: 'B', y: 65 },
|
|
{ x: 'C', y: 19 },
|
|
{ x: 'D', y: 40 },
|
|
],
|
|
[showing]
|
|
)}
|
|
/>
|
|
)
|
|
}
|