@tecsinapse/react-charts 0.0.2 → 1.0.0

package/src/components/Label/styled.ts

@@ -1,47 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { Text as RNText, View } from 'react-native';
-import { spacing } from '../../styles';
-
-const flexBasis = (columns: number) =>
-  css({ flexBasis: `${100 / columns - 2}%` });
-
-export const Container = styled(View)<{ columns: number }>(
-  ({ columns }) =>
-    css`
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-bottom: ${spacing.centi};
-      ${flexBasis(columns)}
-    `
-);
-
-const expandStyles = (expand?: boolean) =>
-  expand &&
-  css`
-    flex: 1;
-  `;
-
-const flexEndStyles = (flexEnd?: boolean) =>
-  flexEnd &&
-  css`
-    justify-content: flex-end;
-  `;
-
-export const Text = styled(RNText)<{
-  font: {
-    fontFamily: string;
-    fontWeight: string;
-  };
-  expand?: boolean;
-  flexEnd?: boolean;
-}>(({ font, expand = false, flexEnd = false }) => {
-  const { fontFamily, fontWeight } = font;
-  return css`
-    font-size: 14px;
-    font-family: ${fontFamily};
-    font-weight: ${fontWeight};
-    ${expandStyles(expand)}
-    ${flexEndStyles(flexEnd)}
-  `;
-});

package/src/components/PieChart/PieChart.tsx

@@ -1,122 +0,0 @@
-import { Text } from 'react-native-svg';
-import React from 'react';
-import { PieChart as PChart } from 'react-native-svg-charts';
-import { Label } from '../Label';
-import { FontFamily, PieChartData, SvgTextType } from '../../types';
-import { getCallback, getFeatured, getTextStyles } from './functions';
-import { Container, LabelsContainer } from './styled';
-
-export interface PieChartProps {
-  data: PieChartData[];
-  /** Chart width/height (square view, in px) */
-  dimension?: number;
-  /** Chart pie area radius (in px) */
-  radius?: number;
-  label?: string;
-  /** You should specify at least fontFamily */
-  labelProps?: SvgTextType;
-  sub?: string;
-  /** You should specify at least fontFamily */
-  subProps?: SvgTextType;
-  /** Number of label columns */
-  columns?: number;
-  /** This should be used if you have a custom font configuration */
-  chartConfig?: {
-    fontFamily: FontFamily;
-  };
-}
-
-const PieChart: React.FC<PieChartProps> = ({
-  data,
-  dimension = 200,
-  radius = 32,
-  label,
-  sub,
-  labelProps,
-  subProps,
-  columns = 1,
-  chartConfig,
-}) => {
-  /** 90 is to compensate the outerRadius featured option */
-  const inner = 90 - (radius * 100) / (dimension / 2);
-
-  const chart = data.map((item, index) => ({
-    value: item.value,
-    svg: {
-      fill: item.color,
-      ...getCallback(item.value, item.label, item.onPress),
-    },
-    ...getFeatured(item.featured ?? false),
-    key: `pie-${index}`,
-  }));
-
-  const sum = data.reduce((prev, curr) => prev + curr.value, 0);
-
-  const {
-    textAnchor,
-    alignmentBaseline,
-    fontSize = 32,
-    fontWeight,
-    fontFamily,
-    fill,
-    y = sub ? -5 : undefined,
-  } = getTextStyles(labelProps, 'bold', chartConfig);
-
-  const {
-    textAnchor: textAnchorSub,
-    alignmentBaseline: alignmentBaselineSub,
-    fontSize: fontSizeSub = 14,
-    fontWeight: fontWeightSub,
-    fontFamily: fontFamilySub,
-    fill: fillSub,
-    y: ySub = 16,
-  } = getTextStyles(subProps, 'bold', chartConfig);
-
-  return (
-    <Container>
-      <PChart
-        style={{ width: dimension, height: dimension, flex: 1 }}
-        data={chart}
-        padAngle={0}
-        innerRadius={`${inner}%`}
-      >
-        <Text
-          textAnchor={textAnchor}
-          alignmentBaseline={alignmentBaseline}
-          fontSize={fontSize}
-          fontWeight={fontWeight}
-          fontFamily={fontFamily}
-          fill={fill}
-          y={y}
-        >
-          {label ?? sum}
-        </Text>
-        {sub && (
-          <Text
-            textAnchor={textAnchorSub}
-            alignmentBaseline={alignmentBaselineSub}
-            fontSize={fontSizeSub}
-            fontWeight={fontWeightSub}
-            fontFamily={fontFamilySub}
-            fill={fillSub}
-            y={ySub}
-          >
-            {sub}
-          </Text>
-        )}
-      </PChart>
-      <LabelsContainer>
-        {data.map(item => (
-          <Label
-            data={item}
-            columns={columns}
-            key={item.label}
-            chartConfig={chartConfig}
-          />
-        ))}
-      </LabelsContainer>
-    </Container>
-  );
-};
-
-export default PieChart;

package/src/components/PieChart/functions.ts

@@ -1,70 +0,0 @@
-import { Platform } from 'react-native';
-import {
-  AlignmentBaseline,
-  FontFamily,
-  FontWeight,
-  SvgTextType,
-  TextAnchor,
-} from '../../types';
-import { fontColor, getFontFamilyAndWeight } from '../../styles';
-
-type CallbackReturn =
-  | Record<string, unknown>
-  | { onClick: () => undefined }
-  | { onPress: () => undefined };
-
-export const getCallback = (
-  value: number,
-  label?: string,
-  fn?: (value: number, label?: string) => void
-): CallbackReturn => {
-  if (!fn) return {};
-  return Platform.OS === 'web'
-    ? {
-        onClick: () => fn?.(value, label),
-      }
-    : {
-        onPress: () => fn?.(value, label),
-      };
-};
-
-type FeaturedType = { arc: { outerRadius: string } };
-
-export const getFeatured = (featured: boolean): FeaturedType => ({
-  arc: { outerRadius: featured ? '100%' : '90%' },
-});
-
-type TextStylesReturn = {
-  fontFamily: string;
-  y: number | undefined;
-  fontSize: number | undefined;
-  textAnchor: TextAnchor;
-  fill: string;
-  alignmentBaseline: AlignmentBaseline;
-  fontWeight: string;
-};
-
-export const getTextStyles = (
-  styles: SvgTextType | undefined,
-  defaultFontWeight: FontWeight,
-  chartConfig: { fontFamily: FontFamily } | undefined
-): TextStylesReturn => {
-  const {
-    textAnchor = 'middle',
-    alignmentBaseline = 'middle',
-    fontSize,
-    fill = fontColor.dark,
-    y,
-  } = styles || {};
-  return {
-    textAnchor,
-    alignmentBaseline,
-    fontSize,
-    fill,
-    y,
-    ...getFontFamilyAndWeight(
-      chartConfig?.fontFamily,
-      styles?.fontWeight ?? defaultFontWeight
-    ),
-  };
-};

package/src/components/PieChart/index.ts

@@ -1 +0,0 @@
-export { default as PieChart } from './PieChart';

package/src/components/index.ts

@@ -1 +0,0 @@
-export { PieChart } from './PieChart';

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from './components';
-export * from './types';
-export * from './styles';

package/src/styles/constants.ts

@@ -1,55 +0,0 @@
-export const fontColor = {
-  light: '#fff',
-  medium: '#85807a',
-  dark: '#353231', // default
-  orange: '#f89907',
-};
-
-export const spacing = {
-  nano: '2px',
-  micro: '4px',
-  mili: '8px',
-  centi: '12px',
-  deca: '16px',
-  kilo: '24px',
-  mega: '32px',
-  giga: '40px',
-  tera: '48px',
-  peta: '56px',
-  hexa: '64px',
-};
-
-export const iconSize = {
-  micro: '12px',
-  mili: '14px',
-  centi: '16px', // '1rem'
-  deca: '18px', // '1.5rem'
-  kilo: '24px', // '1.6rem'
-  mega: '32px', // '2rem'
-};
-
-export const borderRadius = {
-  nano: '2px',
-  micro: '4px',
-  mili: '8px',
-  centi: '16px',
-  deca: '24px',
-  pill: '999999px', // also circle
-};
-
-export const fontStack = {
-  default: 'Lato',
-  mono: 'Consolas, monaco, monospace',
-};
-
-export const fontWeight = {
-  regular: '400',
-  bold: '700',
-  black: '900',
-};
-
-export const nativeFontStack = {
-  black: 'Lato-Black',
-  bold: 'Lato-Bold',
-  regular: 'Lato-Regular',
-};

package/src/styles/functions.ts

@@ -1,17 +0,0 @@
-import { Platform } from 'react-native';
-import { fontStack, fontWeight, nativeFontStack } from './constants';
-import { FontFamily, FontWeight } from '../types';
-
-export const getFontFamilyAndWeight = (
-  fontFamily: FontFamily | undefined,
-  weight: FontWeight
-): { fontFamily: string; fontWeight: string } =>
-  Platform.OS === 'web'
-    ? {
-        fontFamily: fontFamily ? fontFamily[weight] : fontStack.default,
-        fontWeight: fontWeight[weight],
-      }
-    : {
-        fontFamily: fontFamily ? fontFamily[weight] : nativeFontStack[weight],
-        fontWeight: fontWeight[weight],
-      };

package/src/styles/index.ts

@@ -1,2 +0,0 @@
-export * from './constants';
-export * from './functions';

package/src/types/pie.ts

@@ -1,7 +0,0 @@
-export type PieChartData = {
-  value: number;
-  label: string;
-  featured?: boolean;
-  color: string;
-  onPress?: (value: number, label?: string) => void;
-};

package/src/types/svg.ts

@@ -1,31 +0,0 @@
-import { FontWeight } from './font';
-
-export type AlignmentBaseline =
-  | 'baseline'
-  | 'text-bottom'
-  | 'alphabetic'
-  | 'ideographic'
-  | 'middle'
-  | 'central'
-  | 'mathematical'
-  | 'text-top'
-  | 'bottom'
-  | 'center'
-  | 'top'
-  | 'text-before-edge'
-  | 'text-after-edge'
-  | 'before-edge'
-  | 'after-edge'
-  | 'hanging';
-
-export type TextAnchor = 'start' | 'middle' | 'end';
-
-export type SvgTextType = {
-  textAnchor?: TextAnchor;
-  alignmentBaseline?: AlignmentBaseline;
-  fontSize?: number;
-  fontWeight?: FontWeight;
-  // fontFamily: string;
-  fill?: string;
-  y?: number;
-};