replace echarts with layercake
This commit is contained in:
MuslemRahimi
parent
12708590a5
commit
014194d61d
@ -92,7 +92,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<svelte:options immutable={true}/>
|
||||
|
||||
|
||||
<div class="fixed z-[100] bottom-8 sm:bottom-10 right-8 sm:right-16">
|
||||
<label for="feedbackInfo" class="inline-flex items-center justify-center w-12 h-12 sm:w-full sm:h-10 font-medium bg-gray-700 sm:bg-[#FFEDE5] ml-1 mr-0 sm:mr-2 rounded-full cursor-pointer">
|
||||
|
||||
119
src/lib/components/LayerCake/Bar/AxisX.svelte
Normal file
119
src/lib/components/LayerCake/Bar/AxisX.svelte
Normal file
@ -0,0 +1,119 @@
|
||||
<!--
|
||||
@component
|
||||
Generates an SVG x-axis. This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
|
||||
-->
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
|
||||
const { width, height, xScale, yRange } = getContext('LayerCake');
|
||||
|
||||
/** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */
|
||||
export let tickMarks = false;
|
||||
|
||||
/** @type {Boolean} [gridlines=true] - Show gridlines extending into the chart area. */
|
||||
export let gridlines = true;
|
||||
|
||||
/** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
|
||||
export let tickMarkLength = 6;
|
||||
|
||||
/** @type {Boolean} [baseline=false] – Show a solid line at the bottom. */
|
||||
export let baseline = false;
|
||||
|
||||
/** @type {Boolean} [snapLabels=false] - Instead of centering the text labels on the first and the last items, align them to the edges of the chart. */
|
||||
export let snapLabels = false;
|
||||
|
||||
/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
|
||||
export let format = d => d;
|
||||
|
||||
/** @type {Number|Array|Function} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
|
||||
export let ticks = undefined;
|
||||
|
||||
/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
|
||||
export let tickGutter = 0;
|
||||
|
||||
/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
|
||||
export let dx = 0;
|
||||
|
||||
/** @type {Number} [dy=12] - Any optional value passed to the `dy` attribute on the text label. */
|
||||
export let dy = 12;
|
||||
|
||||
function textAnchor(i, sl) {
|
||||
if (sl === true) {
|
||||
if (i === 0) {
|
||||
return 'start';
|
||||
}
|
||||
if (i === tickVals.length - 1) {
|
||||
return 'end';
|
||||
}
|
||||
}
|
||||
return 'middle';
|
||||
}
|
||||
|
||||
$: tickLen = tickMarks === true ? tickMarkLength ?? 6 : 0;
|
||||
|
||||
$: isBandwidth = typeof $xScale.bandwidth === 'function';
|
||||
|
||||
$: tickVals = Array.isArray(ticks)
|
||||
? ticks
|
||||
: isBandwidth
|
||||
? $xScale.domain()
|
||||
: typeof ticks === 'function'
|
||||
? ticks($xScale.ticks())
|
||||
: $xScale.ticks(ticks);
|
||||
|
||||
$: halfBand = isBandwidth ? $xScale.bandwidth() / 2 : 0;
|
||||
</script>
|
||||
|
||||
<g class="axis x-axis" class:snapLabels>
|
||||
{#each tickVals as tick, i (tick)}
|
||||
{#if baseline === true}
|
||||
<line class="baseline" y1={$height} y2={$height} x1="0" x2={$width} />
|
||||
{/if}
|
||||
|
||||
<g class="tick tick-{i}" transform="translate({$xScale(tick)},{Math.max(...$yRange)})">
|
||||
{#if gridlines === true}
|
||||
<line class="gridline" x1={halfBand} x2={halfBand} y1={-$height} y2="0" />
|
||||
{/if}
|
||||
{#if tickMarks === true}
|
||||
<line
|
||||
class="tick-mark"
|
||||
x1={halfBand}
|
||||
x2={halfBand}
|
||||
y1={tickGutter}
|
||||
y2={tickGutter + tickLen}
|
||||
/>
|
||||
{/if}
|
||||
<text x={halfBand} y={tickGutter + tickLen} {dx} {dy} text-anchor={textAnchor(i, snapLabels)}
|
||||
>{format(tick)}</text
|
||||
>
|
||||
</g>
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
<style>
|
||||
.tick {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
line,
|
||||
.tick line {
|
||||
stroke: #aaa;
|
||||
stroke-dasharray: 2;
|
||||
}
|
||||
|
||||
.tick text {
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
.tick .tick-mark,
|
||||
.baseline {
|
||||
stroke-dasharray: 0;
|
||||
}
|
||||
/* This looks slightly better */
|
||||
.axis.snapLabels .tick:last-child text {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
.axis.snapLabels .tick.tick-0 text {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
</style>
|
||||
119
src/lib/components/LayerCake/Bar/AxisY.svelte
Normal file
119
src/lib/components/LayerCake/Bar/AxisY.svelte
Normal file
@ -0,0 +1,119 @@
|
||||
<!--
|
||||
@component
|
||||
Generates an SVG y-axis. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the tickMarks in the middle of the bandwidth.
|
||||
-->
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
|
||||
const { xRange, yScale, width } = getContext('LayerCake');
|
||||
|
||||
/** @type {Boolean} [tickMarks=false] - Show marks next to the tick label. */
|
||||
export let tickMarks = false;
|
||||
|
||||
/** @type {String} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'. */
|
||||
export let labelPosition = 'even';
|
||||
|
||||
/** @type {Boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
|
||||
export let snapBaselineLabel = false;
|
||||
|
||||
/** @type {Boolean} [gridlines=true] - Show gridlines extending into the chart area. */
|
||||
export let gridlines = true;
|
||||
|
||||
/** @type {Number} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
|
||||
export let tickMarkLength = undefined;
|
||||
|
||||
/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
|
||||
export let format = d => d;
|
||||
|
||||
/** @type {Number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
|
||||
export let ticks = 4;
|
||||
|
||||
/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
|
||||
export let tickGutter = 2;
|
||||
|
||||
/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
|
||||
export let dx = 0;
|
||||
|
||||
/** @type {Number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
|
||||
export let dy = 0;
|
||||
|
||||
/** @type {Number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
|
||||
export let charPixelWidth = 7.25;
|
||||
|
||||
$: isBandwidth = typeof $yScale.bandwidth === 'function';
|
||||
|
||||
$: tickVals = Array.isArray(ticks)
|
||||
? ticks
|
||||
: isBandwidth
|
||||
? $yScale.domain()
|
||||
: typeof ticks === 'function'
|
||||
? ticks($yScale.ticks())
|
||||
: $yScale.ticks(ticks);
|
||||
|
||||
function calcStringLength(sum, val) {
|
||||
if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
|
||||
return sum + charPixelWidth;
|
||||
}
|
||||
|
||||
$: tickLen =
|
||||
tickMarks === true
|
||||
? labelPosition === 'above'
|
||||
? tickMarkLength ?? widestTickLen
|
||||
: tickMarkLength ?? 6
|
||||
: 0;
|
||||
|
||||
$: widestTickLen = Math.max(
|
||||
10,
|
||||
Math.max(...tickVals.map(d => format(d).toString().split('').reduce(calcStringLength, 0)))
|
||||
);
|
||||
|
||||
$: x1 = -tickGutter - (labelPosition === 'above' ? widestTickLen : tickLen);
|
||||
$: y = isBandwidth ? $yScale.bandwidth() / 2 : 0;
|
||||
|
||||
$: maxTickValPx = Math.max(...tickVals.map($yScale));
|
||||
</script>
|
||||
|
||||
<g class="axis y-axis">
|
||||
{#each tickVals as tick (tick)}
|
||||
{@const tickValPx = $yScale(tick)}
|
||||
<g class="tick tick-{tick}" transform="translate({$xRange[0]}, {tickValPx})">
|
||||
{#if gridlines === true}
|
||||
<line class="gridline" {x1} x2={$width} y1={y} y2={y}></line>
|
||||
{/if}
|
||||
{#if tickMarks === true}
|
||||
<line class="tick-mark" {x1} x2={x1 + tickLen} y1={y} y2={y}></line>
|
||||
{/if}
|
||||
<text
|
||||
x={x1}
|
||||
{y}
|
||||
dx={dx + (labelPosition === 'even' ? -3 : 0)}
|
||||
text-anchor={labelPosition === 'above' ? 'start' : 'end'}
|
||||
dy={dy +
|
||||
(labelPosition === 'above' || (snapBaselineLabel === true && tickValPx === maxTickValPx)
|
||||
? -3
|
||||
: 4)}>{format(tick)}</text
|
||||
>
|
||||
</g>
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
<style>
|
||||
.tick {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.tick line {
|
||||
stroke: #aaa;
|
||||
}
|
||||
.tick .gridline {
|
||||
stroke-dasharray: 2;
|
||||
}
|
||||
|
||||
.tick text {
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
.tick.tick-0 line {
|
||||
stroke-dasharray: 0;
|
||||
}
|
||||
</style>
|
||||
26
src/lib/components/LayerCake/Bar/Bar.svelte
Normal file
26
src/lib/components/LayerCake/Bar/Bar.svelte
Normal file
@ -0,0 +1,26 @@
|
||||
<!--
|
||||
@component
|
||||
Generates an SVG bar chart.
|
||||
-->
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
|
||||
const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
|
||||
|
||||
/** @type {String} [fill='#00bbff'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
|
||||
export let fill = '#fff';
|
||||
</script>
|
||||
|
||||
<g class="bar-group">
|
||||
{#each $data as d, i}
|
||||
<rect
|
||||
class="group-rect"
|
||||
data-id={i}
|
||||
x={$xScale.range()[0]}
|
||||
y={$yGet(d)}
|
||||
height={$yScale.bandwidth()}
|
||||
width={$xGet(d)}
|
||||
{fill}
|
||||
></rect>
|
||||
{/each}
|
||||
</g>
|
||||
@ -11,20 +11,15 @@
|
||||
import Activity from "lucide-svelte/icons/activity";
|
||||
import { abbreviateNumber, formatDate } from '$lib/utils';
|
||||
|
||||
import { numberOfUnreadNotification, screenWidth} from '$lib/store';
|
||||
import Lazy from 'svelte-lazy';
|
||||
import { numberOfUnreadNotification} from '$lib/store';
|
||||
|
||||
import { Chart } from 'svelte-echarts'
|
||||
import { LayerCake, Svg } from 'layercake';
|
||||
import { scaleBand } from 'd3-scale';
|
||||
import Bar from '$lib/components/LayerCake/Bar/Bar.svelte';
|
||||
import AxisY from '$lib/components/LayerCake/Bar/AxisY.svelte';
|
||||
|
||||
import { init, use } from 'echarts/core'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
import { GridComponent } from 'echarts/components'
|
||||
|
||||
// now with tree-shaking
|
||||
use([BarChart, GridComponent])
|
||||
|
||||
|
||||
export let data;
|
||||
let isLoaded = false;
|
||||
|
||||
const quickInfo = data?.getDashboard?.quickInfo;
|
||||
|
||||
@ -49,68 +44,15 @@ function latestInfoDate(inputDate) {
|
||||
return differenceInDays <=1;
|
||||
}
|
||||
|
||||
const tickerGraphName = data?.getDashboard?.retailTracker?.map(item => item?.symbol) || [];
|
||||
const tradedList = data?.getDashboard?.retailTracker?.map(item => item?.traded) || [];
|
||||
|
||||
const optionsGraph = {
|
||||
animation: $screenWidth < 640 ? false: true,
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '3%',
|
||||
bottom: '6%',
|
||||
top: '0%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
axisLabel: {
|
||||
show: false // Hide x-axis labels
|
||||
},
|
||||
axisTick: {
|
||||
show: false // Hide x-axis ticks
|
||||
},
|
||||
axisLine: {
|
||||
show: false // Hide x-axis line
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: tickerGraphName,
|
||||
inverse: true,
|
||||
axisTick: {
|
||||
show: false // Hide x-axis ticks
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: tradedList,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: function(params) {
|
||||
return abbreviateNumber(params?.value,true);
|
||||
},
|
||||
fontWeight: 600
|
||||
},
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'white' // Bar color is white
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const xKey = 'traded';
|
||||
const yKey = 'symbol';
|
||||
|
||||
let Feedback;
|
||||
|
||||
onMount( async() => {
|
||||
Feedback = (await import('$lib/components/Feedback.svelte')).default
|
||||
Feedback = (await import('$lib/components/Feedback.svelte')).default
|
||||
isLoaded = true;
|
||||
})
|
||||
|
||||
|
||||
@ -309,18 +251,32 @@ onMount( async() => {
|
||||
<Card.Description class="mt-2">Latest Retail Trader investing behavior to identify market trends.</Card.Description>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="pb-2 rounded-lg bg-[#09090B]">
|
||||
|
||||
|
||||
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
|
||||
<div class="app w-full h-[300px] mt-5">
|
||||
<Chart {init} options={optionsGraph} class="chart" />
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
</div>
|
||||
|
||||
<Card.Content>
|
||||
{#if data?.getDashboard?.retailTracker?.length !== 0 && isLoaded}
|
||||
<div class="chart-container">
|
||||
<LayerCake
|
||||
padding={{ bottom: 20, left: 35 }}
|
||||
x={xKey}
|
||||
y={yKey}
|
||||
yScale={scaleBand().paddingInner(0.2)}
|
||||
xDomain={[0, null]}
|
||||
data={data?.getDashboard?.retailTracker}
|
||||
>
|
||||
<Svg>
|
||||
<AxisY tickMarks gridlines={false} />
|
||||
<Bar />
|
||||
</Svg>
|
||||
</LayerCake>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex justify-center items-center h-80">
|
||||
<div class="relative">
|
||||
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||
<span class="loading loading-spinner loading-md"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
@ -419,23 +375,11 @@ onMount( async() => {
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.app {
|
||||
height: 250px;
|
||||
max-width: 100%; /* Ensure chart width doesn't exceed the container */
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.app {
|
||||
height: 210px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
.scrollbar {
|
||||
display: grid;
|
||||
grid-gap: 90px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user