tremorlabs / tremor Goto Github PK
View Code? Open in Web Editor NEWReact components to build charts and dashboards
Home Page: https://npm.tremor.so
License: Apache License 2.0
React components to build charts and dashboards
Home Page: https://npm.tremor.so
License: Apache License 2.0
npm ERR! code ETARGET
npm ERR! notarget No matching version found for recharts@^2.1.13.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
I think it would be useful to have a search bar component to filter rows of a table/list or other data. I've seen your examples of using a MultiSelectbox box for filtering, but I think the search functionality would be helpful too.
I noticed that the y-axis will always start at 0. So for example if all your values are somewhere between 80 and 100 you get very little detail in the line charts. Is there currently a way to (dynamically) adjust the y-axis so you preserve more detail? Or would this need to be a new feature?
Inside of src/tests/input-elements/MultiSelectBox.tsx
, it references to a prop called name
on MultiSelectBoxItem
, which I am assuming has been replaced by text
(or even better in the future, children
).
Using the 'Tracker' component white isn't a valid colour option, it defaults to blue, so does leaving colour blank.
Having white would be useful against the white background so it can visually show a reduction of tracking blocks whilst staying the same size as a comparison tracker, currently when reducing tracking block count it resizes, it would be nice to have some customisability. and not have it auto fill/fit to the width.
The DatePicker component is really clean and awesome but its tedious to use as a birth input for example because it only supports navigating by months. Adding some sort of year selector would make it perfect
Maybe let dropdowns not have to be for selecting an option, but rather for performing actions e.g. Edit, Archive, Delete, etc.
This could also allow for an IconDropdown component that only shows an Icon (e.g. three vertical dots) instead of text.
It would be nice to give a prop to a DatePicker for setting the relative date range. For instance, one could choose to give a default range when rendering the DatePicker.
Hello! Can this library be used on Deno Deploy? I have tried importing it with https://esm.sh/ to no success. Any pointers are greatly appreciated!
I'm trying new app
folder which is in beta now since Next.js 13.
But using the app
folder, I have an error message that I don't have in pages
folder.
I have pushed a minimal repos for testing purpose: https://github.com/srod/nextjs-13-tremor
git clone https://github.com/srod/nextjs-13-tremor.git
cd nextjs-13-tremor
npm install && npm run dev
Access example page: http://localhost:3000/example
error - (sc_server)/node_modules/@tremor/react/dist/cjs/index.js (6:41848) @ eval
error - TypeError: Super expression must either be null or a function
at eval (webpack-internal:///(sc_server)/./node_modules/@tremor/react/dist/cjs/index.js:1884:57)
at eval (webpack-internal:///(sc_server)/./node_modules/@tremor/react/dist/cjs/index.js:1892:6)
at eval (webpack-internal:///(sc_server)/./node_modules/@tremor/react/dist/cjs/index.js:1952:2)
at Object.(sc_server)/./node_modules/@tremor/react/dist/cjs/index.js (/Users/rodolphe/Downloads/nextjs-13-tremor/.next/server/app/example/page.js:251:1)
at __webpack_require__ (/Users/rodolphe/Downloads/nextjs-13-tremor/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///(sc_server)/./app/example/page.tsx:6:71)
at Object.(sc_server)/./app/example/page.tsx (/Users/rodolphe/Downloads/nextjs-13-tremor/.next/server/app/example/page.js:229:1)
at __webpack_require__ (/Users/rodolphe/Downloads/nextjs-13-tremor/.next/server/webpack-runtime.js:33:42)
at Object.page (webpack-internal:///(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fexample%2Fpage&appPaths=%2Fexample%2Fpage&pagePath=private-next-app-dir%2Fexample%2Fpage.tsx&appDir=%2FUsers%2Frodolphe%2FDownloads%2Fnextjs-13-tremor%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Frodolphe%2FDownloads%2Fnextjs-13-tremor&isDev=true&tsconfigPath=tsconfig.json!:22:124)
at collectGenerateParams (/Users/rodolphe/Downloads/nextjs-13-tremor/node_modules/next/dist/build/utils.js:710:194) {
type: 'TypeError',
page: '/example'
}
null
Hi team,
I just went through the example dashboard and I have to say it's really great!!
During the 3rd Step "Add a Chart" you are using an Icon from React Hero Icons.
import { InformationCircleIcon } from '@heroicons/react/outline';
As I am noob dev I'm always struggling with all kind of errors and I think it's helpful to implement a short sentence about the import at the beginning or in the 3rd Step.
npm install @heroicons/react
Best,
Richard!
PS: I think it was npm install @heroicons/react@1
because there was a version issue too. I'd have to test this again :/
I was looking to do something like this where the x axis shows the month, and the tooltip shows the hour as well as the population growth rate, is it possible?
const chartdata = [
{
month: "Oct",
hour: "8th 01:00"
"Population growth rate": 1.74,
},
{
month: "Oct",
hour: "8th 02:00"
"Population growth rate": 1.93,
},
{
month: "Oct",
hour: "8th 03:00"
"Population growth rate": 1.9,
},
{
month: "Oct",
hour: "8th 04:00"
"Population growth rate": 1.98,
},
{
month: "Oct",
hour: "8th 05:00"
"Population growth rate": 2,
},
];
When there are enough data bars, some names are hidden even though its shown in the legend. A solution could be to allow to rotate the x labels by some degree to allow more names to be shown or even make it automatically given the amount of bars and space available
Hello:
In an existing next.js project, I am trying to import the tremor.css as per your documentation but received an error.
I first added the tremor npm using npm install @tremor/react
Then, I tried importing the css using import '@tremor/react/dist/esm/tremor.css';
Then, for a bit nothing seems to have and the cursor changes till finally I get the following message:
import-im6.q16: attempt to perform an operation not allowed by the security policy `@tremor/react/dist/esm/tremor.css' @ error/blob.c/OpenBlob/2624.```
I tried importing a Card in the component while it does not give me an error, it as expected did not apply the css
Thanks
curious if your guidance would be to implement it with a table or if a custom Tremor component makes sense
Hello:
This is more of a question. Is there support for dark mode?
I tried <Text color="blue" dark:color="green">Check</Text>
and it gave an error.
Thanks
Current implementation doesn't seem to support TS. Will there be a release for TS?
Would be nice to be able to set the enabled property on buttons.
If I update the LineChart
example data to look like:
const chartdata = [
{
year: 1951,
"Population growth rate": 1.74,
},
{
year: 1952,
"Population growth rate": 1.63,
},
{
year: 1953,
"Population growth rate": 1.9,
},
{
year: 1954,
"Population growth rate": 1.98,
},
{
year: 1955,
"Population growth rate": 2,
},
{
year: 1999,
"Population growth rate": 1.8,
},
];
where there is a gap between 1955 and 1999. it would be great if there were a way to have the x-axis reflect this gap as opposed to displaying the data as though 1999 is just one step above 1955.
This is especially useful for sparse data sets where the readings may not occur linearly
I'm finding it very easy to create and customize dashboards even with little to no prior React experience. It would be great if there's capability to add horizontal or vertical lines to mark significant points in a chart in the future.
Hello,
in the BarList
component the item.value
is used as the key prop.
This causes issues with data that has duplicate values in the list:
Warning: Encountered two children with the same key,
2
. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
I propose using item.text
as the key.
It would have been great if there was a way to display x numbers of calendars in the datepicker (preferably two). This is useful when you went to let your users pick a range that can be longer that a month without the extra clicks
Hello, just wanted to say that this is an awesome project and l hope to use it in production. However, as other developers have mentioned, I don't think I'll be able to use this library until I have the ability to use custom colors defined in tailwind.config. This is purely for branding reasons of course. Is this feature currently on the roadmap? Or are you guys sticking to the strictly-opinionated model? Respect the decision either way.
Amber is mapped to orange
Hi lads!
Any chance of pie charts and donut charts being added in an upcoming update?
Are they on the roadmap, are they already kicked-off?
The Datepicker component seems to only allow date ranges, is it currently possible to set it to selecting a single date?
Hi,
I was having a look at optional Tailwind installation step 2 paths added in content: []
does not match Tailwind React installation guide.
I understand that the path could point to where needed, but it would be nicer to be matching with Tailwind documentation which will eliminate any confusions caused by this for new developers looking into the project.
I am receiving a weird error when I try to run my App and access a page where the tremor components should be rendered. It used to work before on a previous version of tremor.
Using the latest Tremor version 1.0.11 and followed the instructions in https://www.tremor.so/docs/getting-started/installation
I important tremor correct like suggested in the _app.tsx
I noticed that the handleSelect in the Toggle component is triggered when the component is rendered. I've got the following Toggle inside a ReactModal and as soon as the modal is opened the handleSelect triggers, causing unwanted API requests. I'm not completely sure if I'm making a mistake somewhere so I'm wondering if more people have noticed this behaviour.
<Toggle defaultValue={"2"} color="emerald" handleSelect={(value) => postMood(value)}>
<ToggleItem value={"1"} text="Great"/>
<ToggleItem value={"2"} text="Okay"/>
<ToggleItem value={"3"} text="Bad"/>
</Toggle>
Hey! First of all thank you for creating this amazing library. I am giving it a try for some charts and I am going really fast! Just noticed a bug when rendering the dot colors in legend because it does not match properly with the data sometimes. I have prepared a codesanbox with the real data that is giving the error but hiding users personal info:
https://codesandbox.io/s/adoring-thunder-owrnsj?file=/src/App.js
As you can see the colors in the tooltip are rendered exactly as the categories order but the data doesnt always have that order because statistics may change between users even in terms of being undefined or not (which are correctly rendered as value 0).
Although the docs do have a walkthrough on how to create the dashboard from the demo site, it would be cool if I could just download or clone it, whatever the method you prefer. I just want to quickly copy / paste it and then tinker around. It looks great, and I want to replicate it quickly.
Great lib so far! Thanks
Hello, it would be nice to have the size on the Legend component which would change the size of the text but also the round
Currently it looks like relative date choices are (last 7 days, last 30 days, MTD, YTD)
What if there was also an option for last quarter or QTD? Or last year? Or All (to beginning of data)
The Icon property on the Button component uses PascalCase
rather than camelCase
for the prop name. Is this intentional or a bug?
import { ReloadIcon } from "someiconlibrary"
<div> // here
<Button text="Reload" Icon={ReloadIcon} importance="primary" />
</div>
Hey! I love the project and what you've built so far ⚡
I noticed that the guide for getting started in the README defines getting started using create-react-app whereas the installation guide on the website describes that the way to get started is by using Next.js! Just wanted to bring this to your attention; not sure if you intend to have instructions for both or just the shinier next.js :)
Again, great work! 🚀
Is there any possibility that in the future, there will be an option to add zoom and pan to charts?
Hi,
First of all, congratulations, because a library like this one is something that the web community has never accomplished correctly and yours is awesome.
I noticed that in a lot of components (such as buttons, text, etc.), there is a text prop instead of simply using the children. This way is more aligned with JSX and the React philosophy and would allow some personalization without compromising much of your architecture.
Also, I love your design system, but I think the configuration given is really strange, passing tailwind classes in a separate prop instead of just having a className prop that overwrites your default classes (there are plenty of npm modules for this).
Hey all, love the library. Super simple and intuitive to get started with.
I'd love to have the option to select a specific shade of a color from the Tailwind palette (e.g. blue-700
), which would be useful for cases like a chart using multiple shades of a color:
Something like this:
<BarChart
data={...}
categories={['First', 'Second', 'Third', 'Fourth']}
dataKey="month"
colors={['blue-700', 'blue-600', 'blue-500', 'blue-400']}
stack={true}
/>
Is this something you'd consider adding?
Realised that i could not add classnames to some table Components like tableHead, I think adding an optional classname prop to the components for extra styling would be lovely. Would love that. Open to even working with the team to accomplish that. Thank you.
About 2-3 months ago, it released the second version of heroicons, but you still use the icons of the first version on your site. I have listed the icons that need to be changed.
https://www.tremor.so/docs/components/dropdown
❌ import { CubeIcon, CubeTransparentIcon } from "@heroicons/react/solid";
✅ import { CubeIcon, CubeTransparentIcon } from "@heroicons/react/24/solid";
https://www.tremor.so/docs/components/icons
❌ import { MailIcon } from "@heroicons/react/solid";
✅ import { EnvelopeIcon } from "@heroicons/react/24/solid";
❌ import { HandIcon } from "@heroicons/react/outline";
✅ import { HandRaisedIcon } from "@heroicons/react/24/outline";
❌ import { CashIcon } from "@heroicons/react/outline";
✅ import { BanknotesIcon } from "@heroicons/react/24/outline";
https://www.tremor.so/docs/components/select
❌ import { CalculatorIcon } from "@heroicons/react/outline";
✅ import { CalculatorIcon } from "@heroicons/react/24/outline";
https://www.tremor.so/docs/components/table
❌ import { StatusOnlineIcon } from "@heroicons/react/outline";
✅ import { SignalIcon } from "@heroicons/react/24/outline";
https://www.tremor.so/docs/components/toggles
❌ import { CheckIcon, CollectionIcon, ReceiptRefundIcon } from "@heroicons/react/outline";
✅ import { CheckIcon, RectangleStackIcon, ReceiptRefundIcon } from "@heroicons/react/24/outline";
https://www.tremor.so/docs/layout/block
❌ import { SwitchHorizontalIcon } from '@heroicons/react/solid';
✅ import { ArrowsRightLeftIcon } from "@heroicons/react/24/solid";
https://www.tremor.so/blocks/landing-zone
❌ import { CogIcon, ShieldExclamationIcon, CheckCircleIcon, ArrowNarrowRightIcon,} from '@heroicons/react/solid';
✅ import { CogIcon, ShieldExclamationIcon, CheckCircleIcon, ArrowLongRightIcon,} from '@heroicons/react/24/solid';
❌ import { ShoppingBagIcon, CashIcon, UsersIcon, ShoppingCartIcon, ArrowNarrowRightIcon,} from '@heroicons/react/solid';
✅ import { ShoppingBagIcon, BanknotesIcon, UsersIcon, ShoppingCartIcon, ArrowLongRightIcon} from '@heroicons/react/24/solid';
❌ import { ArrowNarrowRightIcon } from '@heroicons/react/solid';
✅ import { ArrowLongRightIcon } from '@heroicons/react/24/solid';
❌ import { ArrowCircleRightIcon, ArrowCircleUpIcon, ArrowCircleDownIcon, ArrowNarrowRightIcon } from '@heroicons/react/solid';
✅ import { ArrowRightCircleIcon, ArrowUpCircleIcon, ArrowDownCircleIcon, ArrowLongRightIcon } from '@heroicons/react/24/solid';
❌ import { CashIcon, ChatAlt2Icon, SupportIcon, UsersIcon, InformationCircleIcon, ArrowNarrowRightIcon } from '@heroicons/react/solid';
✅ import { BanknotesIcon, ChatBubbleLeftRightIcon, LifebuoyIcon, UsersIcon, InformationCircleIcon, ArrowLongRightIcon } from '@heroicons/react/24/solid';
https://www.tremor.so/blocks/charts
❌ import { CheckCircleIcon } from '@heroicons/react/solid';
✅ import { CheckCircleIcon } from '@heroicons/react/24/solid';
https://www.tremor.so/blocks/kpi-cards
❌ import { CashIcon, TicketIcon, UserGroupIcon } from '@heroicons/react/solid';
✅ import { BanknotesIcon, TicketIcon, UserGroupIcon } from '@heroicons/react/24/solid';
❌ import { TrendingUpIcon, TrendingDownIcon, ArrowNarrowRightIcon } from '@heroicons/react/solid';
✅ import { ArrowTrendingUpIcon, ArrowTrendingDownIcon, ArrowLongRightIcon } from '@heroicons/react/24/solid';
❌ import { ArrowCircleDownIcon, CogIcon, MinusCircleIcon, CheckCircleIcon } from '@heroicons/react/solid';
✅ import { ArrowDownCircleIcon, CogIcon, MinusCircleIcon, CheckCircleIcon } from '@heroicons/react/24/solid';
❌ import { BriefcaseIcon, DesktopComputerIcon, ShieldExclamationIcon, ShoppingBagIcon, ArrowNarrowRightIcon, LightningBoltIcon, HomeIcon, TruckIcon } from '@heroicons/react/solid';
✅ import { BriefcaseIcon, ComputerDesktopIcon, ShieldExclamationIcon, ShoppingBagIcon, ArrowLongRightIcon, BoltIcon, HomeIcon, TruckIcon } from '@heroicons/react/24/solid';
When I add
<ProgressBar percentageValue={ 32 } marginTop="mt-2" />
it correctly displays the progressbar when automatically reloading the site, but throws the error TypeError: Cannot read properties of null (reading 'useState')
when I manually load the site.
Full error message:
cont_2-frontend-1 | Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
cont_2-frontend-1 | 1. You might have mismatching versions of React and the renderer (such as React DOM)
cont_2-frontend-1 | 2. You might be breaking the Rules of Hooks
cont_2-frontend-1 | 3. You might have more than one copy of React in the same app
cont_2-frontend-1 | See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
cont_2-frontend-1 | TypeError: Cannot read properties of null (reading 'useState')
cont_2-frontend-1 | at Object.useState (/node_modules/react/cjs/react.development.js:1622:21)
cont_2-frontend-1 | at /node_modules/@tremor/react/dist/cjs/index.js:249:382363
cont_2-frontend-1 | at renderWithHooks (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
cont_2-frontend-1 | at renderIndeterminateComponent (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
cont_2-frontend-1 | at renderElement (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
cont_2-frontend-1 | at renderNodeDestructiveImpl (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
cont_2-frontend-1 | at renderNodeDestructive (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
cont_2-frontend-1 | at renderForwardRef (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
cont_2-frontend-1 | at renderElement (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
cont_2-frontend-1 | at renderNodeDestructiveImpl (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
cont_2-frontend-1 | error - TypeError: Cannot read properties of null (reading 'useState')
cont_2-frontend-1 | at Object.useState (/node_modules/react/cjs/react.development.js:1622:21)
cont_2-frontend-1 | at /node_modules/@tremor/react/dist/cjs/index.js:249:382363
cont_2-frontend-1 | at renderWithHooks (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
cont_2-frontend-1 | at renderIndeterminateComponent (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
cont_2-frontend-1 | at renderElement (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
cont_2-frontend-1 | at renderNodeDestructiveImpl (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
cont_2-frontend-1 | at renderNodeDestructive (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
cont_2-frontend-1 | at renderForwardRef (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
cont_2-frontend-1 | at renderElement (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
cont_2-frontend-1 | at renderNodeDestructiveImpl (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) {
cont_2-frontend-1 | page: '/'
cont_2-frontend-1 | }
Am I doing something wrong or is this an issue with tremor?
Admittedly, I don't have a ton of experience with Tailwind, so I am not sure if this is on them or with Tremor, but importing Tremor's CSS styles globally the ul
and the li
elements, which broke some existing things I didn't want styled. Is it possible to scope your styles, or use Tremor without global styles?
I'm trying to add a simple variation of small-caps to a Title
component. I don't think this is possible today unless Tremor components pass through the styles
or className
props. I prefer to use Tailwind (I love that Tremor is built on top of it) and I would love to be able to add tailwind classes to Tremor components.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.