DOCSEARCHbyAlgolia
Submit Docs

OT Components Library

website·Indexed 29 days ago

https://ot-components-new.netlify.app/

A collection of UI components, charts, and utilities. Includes a wide variety of data visualizations such as Sankey diagrams, Gantt charts, and Waffle charts (some powered by d3), as well as interactive controls like Tree Select, Date picker, and Drag Select, and animation utilities using GSAP.

Tokens
19.2K
Snippets
109
Records
151
Agent score
74%

What's inside OT Components

  1. Overview of the Sidecharts component library

    Sidecharts is a suite of reusable data visualization components developed by OneTandem to standardize development, ensure visual consistency, and improve scalability across data-driven projects. It is designed to reduce development time while maintaining high quality and a cohesive user experience.

  4. Waffle Chart Component Overview

    The Waffle Chart is a visual representation of data using a grid of 100 small equal-sized squares or rectangles, where each square represents 1% of the total data. The component is built using SVG and d3, with GSAP used for animations. Because it relies on whole squares, values are rounded; if rounding errors occur (summing to 99% or 101%), the difference is adjusted in the largest category.

  7. Implement a Sankey diagram chart

    The Sankey diagram is used to represent a directed graph with no circular paths. It requires two primary data arrays: nodes (defining the entities) and links (defining the flow between entities with an associated value).
    {
  nodes: [
    { id: "A" },
    { id: "B" },
    { id: "C" },
    { id: "D" }
  ],
  links: [
    { source: "A", target: "B", value: 30 },
    { source: "A", target: "C", value: 10 },
    { source: "B", target: "C", value: 20 },
    { source: "B", target: "D", value: 20 }
  ],
}

  11. Implement an Accordion UI component

    The Accordion is a UI component designed for displaying multiple sections of information where only one section can be open at a time. When a user opens a new section, the previously open section automatically closes. This component requires heroicons as a dependency.

  12. Implement a dynamic Select component with URL filter integration

    The Select component is a versatile input that integrates with URL filters using the useFilters composable. It dynamically adapts its UI based on the provided data format: it functions as a Multi-Select if the value is an array, and transforms into a Tree Select if the value is a tree structure. It supports optional features such as a search bar and flag displays.