
Research
Malicious npm Packages Impersonate Flashbots SDKs, Targeting Ethereum Wallet Credentials
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
@meniga/charts
Advanced tools
This package is a Meniga-branded wrapper for recharts. Documentation and examples for recharts can be found here: https://recharts.org/en-US/api.
import { AreasChart } from '@meniga/charts'
<AreasChart
values={ [
{ id: 1, amount1: 120, amount2: 20, amount3: 210 }
{ id: 2, amount1: 140, amount2: 60, amount3: 230 }
{ id: 3, amount1: 20, amount2: 10, amount3: 110 }
]}
areas={ [{ key: 'amount1' }, { key: 'amount2' }, { key: 'amount3' }] }
xAxis={ [{ key: 'id', type: 'number', domain: ['dataMin', 'dataMax'] }] }
yAxis={ [{ type: 'number', domain: ['auto', 'auto'] }] }
colors={ ['#FF0000', '#00FF00', '#0000FF'] }
areaOpacity={ 0.2 } />
In the above example we send in all the relevant values, then define which keys we want to create areas from. We specify that we want one x-axis for the id, and one y-axis. For an area chart to know which colors the different areas should be in we also need to provide a list of colors (in which the first color will be used for the first area). We can also change the opacity of the area fill color.
import { BarsChart } from '@meniga/charts'
<BarsChart
values={ [
{ id: 1, amount1: 120, amount2: 20 }
{ id: 2, amount1: 140, amount2: 60 }
{ id: 3, amount1: 20, amount2: 10 }
]}
xAxis={ [{ key: 'id', type: 'number', domain: ['dataMin', 'dataMax'] }] }
yAxis={ [{ type: 'number', domain: ['auto', 'auto'] }] }
bars={ [{ key: 'amount1' }, { key: 'amount2', isPrediction: true }] } />
In the above example we send in all the relevant values, then define which keys we want to create bars from. We specify that we want one x-axis for the id, and one y-axis. To display the bar with the predefined look designed for predictions, pass isPrediction: true
import { LinesChart } from '@meniga/charts'
<LinesChart
values={ [
{ id: 1, amount1: 120, amount2: 20 }
{ id: 2, amount1: 140, amount2: 60 }
{ id: 3, amount1: 20, amount2: 10 }
]}
xAxis={ [{ key: 'id', type: 'number', domain: ['dataMin', 'dataMax'] }] }
yAxis={ [{ type: 'number', domain: ['auto', 'auto'] }] }
lines={ [{ key: 'amount1' }, { key: 'amount2', isPrediction: true }] } />
In the above example we send in all the relevant values, then define which keys we want to create lines from. We specify that we want one x-axis for the id, and one y-axis. To display the line with the predefined look designed for predictions, pass isPrediction: true
import { CombinedChart } from '@meniga/charts'
<CombinedChart
values={ [
{ id: 1, amount1: 120, amount2: 20, amount3: 210 }
{ id: 2, amount1: 140, amount2: 60, amount3: 230 }
{ id: 3, amount1: 20, amount2: 10, amount3: 110 }
]}
xAxis={ [{ key: 'id', type: 'number', domain: ['dataMin', 'dataMax'] }] }
yAxis={ [{ type: 'number', domain: ['auto', 'auto'] }] }
lines={ [{ key: 'amount1' }, { key: 'amount2', isPrediction: true }] }
bars={ [{ key: 'amount3' }] } />
If you want to create a chart with a combination of the different types, CombinedChart should be used. It's created like the other charts, then add lines/bars/areas lists depending on which types you want included.
Meniga-Charts support three four main chart types:
The chart containers can differ in how they display the content, for example hovering data in a bars chart will select the whole area while hovering data in a lines chart will select the dot on the line.
Helper to format to amounts in chart.
FAQs
A Meniga-branded chart library that uses recharts
We found that @meniga/charts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.