Introduction

This is the open source package for graphical components and widgets that developed by Microsoft MSN Money team. It is used among our products like MSN Money page and Bing.com.

Available Components

Currently only radar chart & Bar chart is available. More components and features will be added as we keep developing the products.

Usage

import { RadarGraph } from 'msn-money-react-components';
const radarGraphMockedProps = {
  id: "1",
  height: 300,
  width: 300,
  radius: 100,
  strokeColor: "#2169EB",
  scorePointRadius: 4,
  attributeScores: [
    { score: Math.random(), majorText: "ratings", minorText: "3/6", translateInY: "-100%" },
    { score: Math.random(), majorText: "health", minorText: "3/6", translateInX: "-100%" },
    { score: Math.random(), majorText: "valuations", minorText: "3/6", translateInX: "-100%", translateInY: "0%" },
    { score: Math.random(), majorText: "performance", minorText: "3/6", translateInX: "0%", translateInY: "0%" },
    { score: Math.random(), majorText: "earnings", minorText: "3/6", translateInX: "0%" }
  ],
  ringsProps: {
    strokeColor: "#2169EB",
    strokeWidth: 1,
    ringsCount: 6,
    strokeOpacity: 0.2
  },
  connectCenterToPoints: true,
  tooltipProps: {}
}

const radarGraphMockedProps2 = {
  ...radarGraphMockedProps,
  id: "2",
  backgroundAreaColorProps: {
    innerColor: "red",
    outerColor: "white",
    innerOpacity: 0.5,
    outerOpacity: 0.5,
    ringsCount: 3
  },
  attributeScores: [
    { score: Math.random(), majorText: "ratings", minorText: "3/6", translateInY: "-100%" },
    { score: Math.random(), majorText: "health", minorText: "3/6", translateInX: "-100%" },
    { score: Math.random(), majorText: "valuations", minorText: "3/6", translateInY: "0%" },
    { score: Math.random(), majorText: "performance", minorText: "3/6", translateInX: "0%" }],
  renderScoreLabel: (score) => {
    return <div style={{ fontSize: "12px", width: "fit-content" }}>{score.score.toFixed(2)}</div>
  }
}

const radarGraphMockedProps3 = {
  ...radarGraphMockedProps,
  id: "3",
  strokeColor: "green",
  backgroundAreaColorProps: {
    innerColor: "#FFFFFF",
    outerColor: "#AAAAAA",
    innerOpacity: 0.77,
    outerOpacity: 0.77,
    ringsCount: 6
  },
  frontAreaColorProps: {
    innerColor: "#FF9E57",
    outerColor: "#B2B9FF",
    innerOpacity: 0.77,
    outerOpacity: 0.77,
  },
  scoreLabelDefaultStyles: { fontSize: "20px" },
  attributeScores: [{ score: Math.random(), majorText: "ratings", minorText: "3/6", translateInY: "-100%" },
  { score: Math.random(), majorText: "health", minorText: "3/6", translateInX: "-100%" },
  { score: Math.random(), majorText: "valuations", minorText: "3/6", translateInY: "0%" }]
}

function App() {
    return (
      <div className="App" style={{ display: "flex", height: "600px", alignItems: "center" }}>
        <div>
          <RadarGraph {...radarGraphMockedProps} />
          <div>Default</div>
        </div>
        <div>
          <RadarGraph {...radarGraphMockedProps2} />
          <div>Customized Score Label Render Function</div>
        </div>
        <div>
          <RadarGraph
            {...radarGraphMockedProps3}
          />
          <div>Customized Score Label Styles</div>
        </div>
      </div>
    );
}