Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
@meniga/charts
Advanced tools
Readme
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
Unknown package
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 0 open source maintainers 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
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.