f5 / unovis Goto Github PK

We don't support the ordinal scale for XY Components, but many people would like to be able to plot an ordinal bar chart.

In our case, it can be achieved by a) simply using the data index in the X accessor function; and b) providing exact tickValues to the Axis component. That's fairly simple but not obvious and I often receive questions about it. So I think it's work adding information abut that to the Stacked abd Grouped Bar docs as a hint.

Currently there's no documentation page for BulletLegend so we should create it.

The prod version of the website (https://unovis.dev/) has several issues that the dev build doesn't have

• When you open the examples via a direct link (e.g. Stacked Area), the styles are broken

• Sometimes the StackBlitz button is disabled even when a proper tab is selected. But I have problems with reproducing this issue.

Running into the following error when attempting to use LeafletFlowMap with react

My Component:

const FlightMapComponent = (props) => {
  const style = `https://api.maptiler.com/maps/positron/style.json?key=${key}`
  const attribution = [
    `<a href="https://www.maptiler.com/copyright/" target="_blank">MapTiler</a>`,
    `<a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap contributors</a>`
  ]

  return (
    <VisLeafletFlowMap 
      data={data}
      style={style}
      height={600}
    />
  );
}

package.json

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@unovis/react": "^1.0.0",
    "@unovis/ts": "^1.0.0",
    "bootstrap": "^5.2.3",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.5.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

When trying to build a project with ng serve I get the following errors

Error: node_modules/@unovis/angular/dist/lib/components/topojson-map/topojson-map.component.d.ts:56:16 - error TS2503: Cannot find namespace 'TopoJSON'.

56     topojson?: TopoJSON.Topology;
                  ~~~~~~~~


Error: node_modules/@unovis/ts/components/topojson-map/config.d.ts:9:16 - error TS2503: Cannot find namespace 'TopoJSON'.

9     topojson?: TopoJSON.Topology;
                 ~~~~~~~~

I've added TopoJSON to my package.json but the issue persists. I've added the following packages:

"@types/topojson-specification": "^1.0.2",
"topojson": "^3.0.2",
"topojson-client": "^3.1.0",

However, updating the types in the files to Any fixes the issue. Or just importing TopoJSON into the file explicitly.
Is there something I'm missing in setting up the package? I figure that my tsconfig setup can also be the issue but just wanted to check if you guys have seen this before

Had one more error that was fixed by adding @types/lodash

Error: node_modules/@unovis/ts/core/component/index.d.ts:1:23 - error TS2688: Cannot find type definition file for 'lodash'.

1 /// <reference types="lodash" />
                        ~~~~~~

The gallery page in dark mode doesn't look great; the card titles aren't visible and the thumbnail images look a bit jarring. I think we should add a dark preview png for each example and use built-in ThemedImage component from docusaurus.

forgive me, I don't have an easy to give a reproduction case via link/fiddle or whatever, but if you add

• 3 [Timeline.selectors.line]: getTooltipText,
• 4 [Timeline.selectors.lines]: getTooltipText

to
https://unovis.dev/gallery/view?collection=Lines%20and%20Areas&title=Basic%20Timeline
it does not seem to work as expected. Timeline.selectors.label seemingly does, but the line/lines selectors don't seem to trigger or install the mouseover handlers as I would expect.

Axis

Two X axes:

TopoJSONMap

Donut

It seems that empty segments are not visible because of the white stroke
https://user-images.githubusercontent.com/755708/202816768-37bdd9b6-a174-4674-b3fe-b636f4a35b40.mp4

Theming

The Theming page doesn't load when you go there from another doc page

Discussed in #112

  const linkLabel = useCallback((l) => {
    switch (l.type) {
      case 'A': return { text: 'Affiliated With' };
      case 'B': return { text: 'Owned By' };
      case 'C': return { text: 'Resolves To' };
      default: return { text: l.type || 'UNKNOWN' };
    }
  }, []);

...
   <VisGraph
      linkLabel={linkLabel}
     ...

type GraphCircleLabel = {
  text: string;
  color?: string | null; // Optional color
  cursor?: string | null; // Optional cursor on hover
  fontSize?: string; // Optional font size as a CSS string
  radius?: number; // Circle radius in pixels
}

  const linkLabel = useCallback((l) => {
    switch (l.type) {
      case 'A': return { text: 'Type A', fontSize: '2rem' };
      case 'B': return { text: 'Type B' };
      case 'C': return { text: 'Type C' };
      default: return { text: l.type || 'Unknown' };
    }
  }, []);

the crosshair component as it stands today only operates on the x axis; this doesn't really make sense for a timeline; or at least it usually wont if you have multiple parallel items. having it be rotatable for the y axis would be useful.

It would be great to see a candlestick shape included in the library, for financial apps.

@reb-dev I've noticed that developers who have never used TypeScript get confused whether they can use the library without it or not. I think it's worth adding a brief doc page saying that the library can be used without TypeScript by dropping the corresponding syntax related to types.

@reb-dev Looks like there's a mismatch between the exported and imported module names

Let's add search functionality via Agolia!

Unovis doesn't seem to support a tooltip for a Line component rendering the value that the user is hovering over. For example:

<VisXYContainer height={500}>
  <VisLine
    data={timeline}  // just {x: number, y: number}[]
    x={(d) => d.x}
    y={(d) => d.y}
  />
  <VisAxis type="x" />
  <VisAxis type="y" />
  <VisTooltip
    triggers={{
      [Line.selectors.line]: (d) => console.log(d),  // *
    }}
  />
</VisXYContainer>

You'll notice the format of the d parameter is:

{
  defined: boolean;
  visible: boolean;
  values: {
    x: number;
    y: number;
    defined: boolean;
    value: number;
  }[];
}

This values field is all data on the line graph; I only want the one value that the user is hovering over. Is this supported?

(instead of hiding it)

@reb-dev I would like to add a new brief section to our home page about who is using Unovis. Currently it's F5 and NGINX so let's add their logos there (preferably in SVG).

Some examples of how others do it:

I've created two sample questions on GitHub Discussions, and we need to do the same for StackOverflow.

We already have the unovis tag there that can be used.

@reb-dev We have several issues with our Gallery on mobile devices. Let's think how we can fix them:

• Open in StackBlitz button overlaps with the tabs;
• On some charts X axis labels overlap;
• Some charts don't fit well (Sankey, Scatter with FreeBrush)

When Donut has showEmptySegments turned on and padAngle specified, empty segments become invisible:

There's another problem related to that. When Donut has an empty segment and showEmptySegments is set to false, padAngle is added twice:

Initially I thought we can just filter the data by removing empty items when showEmptySegments is showEmptySegments, but it messes up the rendering (colors, ...) because indices of the elements change.

Setting --vis-xy-label-stroke-color won't have any effect because the stroke value is overwritten via element styles. We don't need every element to have stroke by default, so we can simply remove that code.

The error message says Uncaught TypeError: Cannot read properties of undefined (reading 'config')

This seems to only happen when using VisAxis components when the whole component is getting destroyed, typically due to a page navigation.

Package versions:

• "@sveltejs/kit": "^1.0.0",
• "svelte": "^3.54.0",
• "vite": "^4.0.0"
• "@unovis/svelte": "^1.0.1",
• "@unovis/ts": "^1.0.1",

I have a local reproduction repo here: https://github.com/vpanyushenko/unovis-svelte-repo and a live version here: https://unovis-svelte-repo-panyushenko.vercel.app/

To reproduce the issue:

1. Click on the "chart" tab in the header which should successfully load the demo chart.
2. Click back to the "home" tab and you'll notice it doesn't load. If you open the console, you'll see the error
3. Refresh the home page
4. Click on the "chart without axis" tab
5. Click back to home. This one loads successfully, the only difference is that VisAxis is not being used.

Hello,

I wanted to experiment locally with unovis so as a starter, i've told myself i could download from stackblitz one of the gallery (angular) projects but when i run npm install i get:

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"15.0.3" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^12.0.3" from @unovis/[email protected]
npm ERR! node_modules/@unovis/angular
npm ERR!   @unovis/angular@"1.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

when i try, in turn, either --force or --legacy-peer-deps, ng serve gives:

An unhandled exception occurred: require() of ES Module /Downloads/set3nr--run/node_modules/@angular/compiler/fesm2015/compiler.mjs not supported.
Instead change the require of /Downloads/set3nr--run/node_modules/@angular/compiler/fesm2015/compiler.mjs to a dynamic import() which is available in all CommonJS modules.

I'm on a Mac M1, and my node version is 19 but downgrading to 16 for instance doesn't help (i get the same errors).
I'm puzzled how come stackblitz can compile and run the project while locally i get these errors. I didn't figure it out how to use the dynamic import, so i was wondering if you might have a suggestion. Btw, the same error with require i see at https://npm.runkit.com/%40unovis%2Fangular.

Thank you!

In the Svelte wrapper of Unovis, x and y accessors are mandatory for all XY components. However in the library, they are optional for Axis, Brush, FreeBrush and Crosshair, which can cause compilation errors.

For the Timeline component, x is mandatory and y is optional.

When I deploy the Basic Sankey in a Next.js application, I get the following error:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at getCSSVariableValue (misc.js:36:12)
    at getCSSVariableValueInPixels (misc.js:39:17)
    at get bleed [as bleed] (index.js:75:167)
    at Sankey._render (index.js:123:25)
    at Sankey.render (index.js:56:14)
    at SingleContainer._render (index.js:82:19)
    at eval (index.js:63:22)

Reproduction: Link

@rokotyan I noticed that unlike our other components, Graph doesn't support CSS variables or custom SVG defs for the node color. When providing either to nodeFill it fails with the following console error:

Is this by design or should we fix it?

As of now, long node labels are being trimmed by default. We would like to make it configurable.

Along with the dark theme, another common and useful theming scenario is "large size". I think it's mainly applicable to the font size values of labels, and luckily they are all configurable via CSS variables.

@reb-dev Can you please expand our theming doc with that information a little bit? Also I was thinking, maybe we can create a dedicated single class for the "large size" theme (in ts/src/styles) and export it from the library. So everyone who needs it, will be able to simply apply that class to the chart's container.

When I deploy Dagre Layout Graph in a Next.js application, I get the following error during the initial render:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'baseVal')
    at SVGGElement.defaultExtent (zoom.js?287e:25:1)
    at new Gesture (zoom.js?287e:186:1)
    at gesture (zoom.js?287e:178:1)
    at SVGGElement.eval (zoom.js?287e:92:1)
    at Selection.__WEBPACK_DEFAULT_EXPORT__ [as each] (each.js?664a:5:1)
    at zoom.transform (zoom.js?287e:91:1)
    at Selection.__WEBPACK_DEFAULT_EXPORT__ [as call] (call.js?2436:4:1)
    at Graph._fit (index.js?4995:278:1)
    at eval (index.js?4995:121:1)

Any idea how to fix or work around the error?

When opening Angular projects from the gallery (say https://unovis.dev/gallery/view?collection=Lines%20and%20Areas&title=Basic%20Line%20Chart) in stackblitz there's the message "Starting dev server" with a circling thunder and nothing happens.

That would be great to add anchor links to the section title and use them in navigation. Currently it's a bit annoying when you open an example and then go back, you'll need to scroll down do that section again.

Our main legend component (BulletLegend) is simple, it doesn't cover many common use cases. and we don't have a doc page for it!

It's the time to revisit our legends, add new legend types and write docs for them.

Lodash has given us quite a bit of troubles before with bundling apps that use Unovis, so we've switched to lodash-es instead of lodash.

Since we don't use it extensively, we can try replacing it with our own functions and/or smaller npm packages, which will give us smaller app bundles.

In some rare cases in Angular apps, we see that D3 transitions get interrupted and the components are not rendered properly:

I couldn't find the reason why it's happening, but we need handle such situations in the library anyway.

Discussed in #107

^{Originally posted by ndtreviv January 19, 2023}
I see that you've added some docs on selecting nodes.

How did you do the dashed border around the node on node 19 below:

Multi-level Chord Diagram will be the first component we add to the library after the 1.0.0 release. Our existing component looks great when it has multiple levels:

But its single level version looks confusing because all the links are straight:

Before we release the component, we need to update the link rendering logic to look more like this:
.

Once that is done, we can proceed with creating wrappers, writing the docs and adding a Gallery example.

Checklist:

• Create a new dev app example
• Update links rendering
• Create wrappers for React, Angular and Svelte
• Write documentation
• Create a Gallery example

@reb-dev I think, for consistency, we should add a CSS variable for the dark theme stroke color for the Grouped Bar component.