Trying to build a bar chart where each bar is essentially 2 bars layered on top of each other, and the top-most bar will be thinner than the bottom bar.
I see the existing feature where if you provide a "stackId", it stacks it, but it is stacked above it, which isn't what I want.
I've been trying to customize a bar shape that supports this, but failing to do so.
What makes this more tricky is, we're using log scaling for the Y axis.
Any input on this would greatly be appreciated!
EDIT: Attaching a mock of what I'm trying to do:
layered bar chart
Great question. That certainly is possible. While rendering multiple Bar elements, they will be put on a single axis next to each other.
The trick is to use multiple x-axes. To show how this works, I added a new story to the Recharts storybook.
You can find the code for it in this PR and soon in the repo itself.
For the sake of a complete answer, I am duplicating the code here.
<ResponsiveContainer width="100%" height={400}>
<BarChart data={data}>
<Bar dataKey="uv" fill="green" xAxisId="one" barSize={50} />
<XAxis xAxisId="one" />
{/* The smaller bar must be rendered in front of the larger one to be visible. */}
<Bar dataKey="pv" fill="red" xAxisId="two" barSize={30} />
<XAxis xAxisId="two" hide />
</BarChart>
</ResponsiveContainer>
Related
I am creating a program calculating flow in piping systems. In the user interface, the program contains a graphical drawing diagram, a ribbon on top of the screen containing functions helping the user drawing, and possibly a side ribbon with additional functions.
Here i've included a picture explaining my intentions:
As of now, my approach to achieve the division of screen, is to have nested elements in a tree structure, where the main branches are the divisions of the screen (the functional areas and the graphical drawing area). In the graphical area, the objects drawn in this area are positioned using absolute coordinates w.r.t. the drawing area element, and are also nested inside this element. As of now, this is the progress that has been made (grey area is the graphical drawing area, the red area is going to contain functions):
To obtain this current division of screen, the general html code looks like this, and the general css code uses mainly certain flex-settings.
App.svelte:
<main class="h-screen w-screen">
<section class="screen">
<!-- Creates a main bar. Will contain several functions and options. -->
<Bar/>
<!-- Creates the drawing board. -->
<DrawBoard/>
</section>
</main>
DrawBoard.svelte:
<section class='board' on:mouseup|self={$selected != null ? createObject : null}>
<!-- Displays all objects contained in the MainDataStructure. -->
{#each $editor.objects as object}
<ObjectOnBoard bind:object={object}/>
{/each}
<ObjectSelection/>
</section>
Using this method leads to several problems. As can be seen in the current progress, one object is moved to the edge of the screen, but instead of going out of the screen, it appears above the functional area. I would want to elements inside elements (the object inside the graphical area) disappear if they went out of the element, as if the graphical area was a screen of its own just like the whole tab. This leads me to my question:
Is this the right approach to achieve the user interface with area divisions i want? It seems so easy to not include a certain combination of setting in css, and then the different sections of the screen will intersect each other. I want to imagine that one solution would be to create one html body for each area, so that elements of each area would never intersect each other (i know that a document only has one body). Is there a totally different approach than the one shown, or do i have to find just the right (imo. kludgy) css settings, so that i make the visuals work as intented? And if this is the right approach, what kind of css-settings and other settings should i look into?
Look into CSS grid for the main layout. (Though this can be done with two flex layouts as well.) You can, for example, use grid-template-areas to set up named areas and then position element in them.
Elements intersecting other areas is just an issue of overflow. Either let the individual sections overflow with scroll (auto/scroll) or cut off their contents (hidden).
I'm currently working on a website, which has a page with 2 big images (combined around 9000px) in them. The idea is that people can click and drag, to see the sides of the image, just like google maps.
At first I built it with just the 2 images next to each other. When animating the parent div on drag, I managed to only get a composite paint once in a while, but no actual paint (draws). I did this by editing the translate3d on the mouse events.
This all worked like a charm and very smooth, until I added an extra div to the parent. Now when I change the translate3d, it has to do a complete recalculate style -> layout -> paint -> composite layers.
So at first the structure was:
<div class="container" style="transform: translate3d(-50%)">
<img src="path/to/img.jpg"><img src="path/to/img.jpg">
</div>
When changing the translate3d, all was good, just had a Composite Layers once in a while.
However, when I change it to the following, all goes bananas:
<div class="container" style="transform: translate3d(-50%)">
<img src="path/to/img.jpg"><img src="path/to/img.jpg">
<div>+</div>
</div>
So like said before, now when editing translate3d, it has to do a complete Recalculate style.
I made sure the div and images both had layers by adding translateZ(0) on them, that didn't help though :(
I'm pretty sure I don't understand the whole paint sequence of chrome to the detail, but after countless hours of reading I can't find the exact thing. I hope someone can shed some light on this matter.
Thanks a bunch!
Edit after Paul's reply:
The Recalculate Style is triggered by the following line:
this.background.style.transform = 'translate3d(' + (this.panoramaX - this.previewOffset) + '%, 0, 0)';
I am adding ContinuumNavigationTransitionInfo to my application, and I have an issue (I'll get to it in a moment) which I think might be solvable by setting the ExitElement property to something appropriate. So, what does ExitElement do, and how do I use it?
For example I see no difference setting the property (very naively):
<Page.Transitions>
<TransitionCollection>
<NavigationThemeTransition>
<ContinuumNavigationTransitionInfo>
<ContinuumNavigationTransitionInfo.ExitElement>
<Canvas Background="Red" Width="500" Height="500" />
</ContinuumNavigationTransitionInfo.ExitElement>
</ContinuumNavigationTransitionInfo>
</NavigationThemeTransition>
</TransitionCollection>
</Page.Transitions>
The issue I'm trying to solve, which I'm hoping I might be able to solve with this property, is that I have a page in my app which forces the light theme (RequestedTheme="Light"). This page can link to itself, but as I'm running the OS in dark theme, I see a startling black flash in the transition, which I think is the OS theme background color, which I'd like to override as white.
You set the exit element on one of your content elements on your page, not in the TransitionInfo iself. I is only writable, because the page will set the exit element when initiating the transition.
Like for example:
<TextBlock Text="This is the exit element" ContinuumNavigationTransitionInfo.IsExitElement="True" />
If you set this, the exit element will get animated (it kind of flies out to the bottom of your page). You don't have to set it to the ContinuumNavigationTransitionInfo itself, but on one of your pages elements.
Also be aware: The Exit element is set on the page from that you are navigating TO a page with the Continuum Navigation on it.
So:
Page 1 (Set IsExitElement = true here)
Page 2 (Set ContinuumNavigationTransitionInfo here)
I'm trying to figure out a way to have two href's attached to a single image, sort of like an old school image map, but just using CSS. Is this even possible?
Currently the HTML looks like this. But I'm being ask to have two URL's attached based on where the user is hovering their mouse.
<div id="logo-wide">
<img src="BIG-Logo_FINAL.png" alt="url-name">
</div>
Philip
You'll have to either
Use an image map
Slice the image in half and wrap each half in a link
Use z-index to hover two absolutely positioned links over the images (this would be really hackish and ugly)
Option 1 or 2 is best.
I am doing this simple project using Flex 4 SDK and I got stuck with this simple problem: I have turned sortable property for AdvancedDataGridColumn to false, but the column header is still rendered as:
As You can see, my label for this header is "06", but the column header is divided and it keeps the place for sort arrow.
How can I change this? I would like my column header to contain only my label.
I know that most probably I need to do some magic with AdvancedDataGridHeaderRenderer but I just started learning Flex and would like to receive some help.
You can add the following property to the AdvancedDataGrid itself:
<mx:AdvancedDataGrid sortExpertMode="true"/>
That will get rid of the annoying extra space for the arrows. An arrow will still show up when you click a column header for sorting, but it will be smaller and less obtrusive. It won't reserve space for itself in the header.
<mx:AdvancedDataGrid sortExpertMode="true">
<mx:columns>
<mx:AdvancedDataGridColumn sortable="false" />