@alitajs/f2 - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

.umirc.ts

@@ -24,24 +24,2 @@ import { defineConfig } from 'dumi';
   extraBabelPlugins: ['version'],
-  styles: [
-    `.__dumi-default-mobile-demo-layout {
-      min-height: 100vh;
-      background: #f5f5f5;
-      padding: 0 !important;
-      overflow: hidden;
-      font-size: 0.26rem;
-    }
-    .__dumi-default-device-status {
-      border-bottom: 1px solid #e3e3e3;
-    }
-    .__dumi-default-mobile-previewer {
-      font-size: initial;
-    }
-    .am-icon {
-      fill: currentColor;
-      background-size: cover;
-      width: 22px;
-      height: 22px;
-    }
-    `,
-  ],
 });

dist/index.esm.js

@@ -223,3 +223,12 @@ import React, { useMemo, forwardRef, useImperativeHandle, useState, useRef, useEffect, Fragment } from 'react';
 }
+/**
+ * 获取%
+ * 如：输入 0.200011010 输出 20
+ * @param n
+ */
 
+function getPercentage(n) {
+  return Math.round(parseFloat("".concat(n || 0)) * 100);
+}
+
 var useChart = (function (props) {
@@ -233,4 +242,3 @@ var pixelRatio = props.pixelRatio,
       _props$colDefs = props.colDefs,
-      colDefs = _props$colDefs === void 0 ? {} : _props$colDefs,
-      _props$animate = props.animate;
+      colDefs = _props$colDefs === void 0 ? {} : _props$colDefs;
 
@@ -276,3 +284,2 @@ var _useState = useState(),
     if (mounting.current) {
-      console.log('chart.render');
       chart.render();
@@ -599,2 +606,2 @@ mounting.current = false;
 
-export { index as Animate, index$1 as Axis, Chart, index$2 as Coordinate, index$3 as Geometry, index$4 as Guide, index$5 as Interaction, index$6 as Legend, index$7 as PieLabel, index$8 as Scale, index$9 as ScrollBar, index$a as Tooltip, isFunction, px2hd, useAnimate, useAxis, useChart, useCoordinate, useGeometry, useGuide, useInteraction, useLegend, usePieLabel, useScale, useScrollBar, useTooltip };
+export { index as Animate, index$1 as Axis, Chart, index$2 as Coordinate, index$3 as Geometry, index$4 as Guide, index$5 as Interaction, index$6 as Legend, index$7 as PieLabel, index$8 as Scale, index$9 as ScrollBar, index$a as Tooltip, getPercentage, isFunction, px2hd, useAnimate, useAxis, useChart, useCoordinate, useGeometry, useGuide, useInteraction, useLegend, usePieLabel, useScale, useScrollBar, useTooltip };

dist/index.js

@@ -233,3 +233,12 @@ 'use strict';
 }
+/**
+ * 获取%
+ * 如：输入 0.200011010 输出 20
+ * @param n
+ */
 
+function getPercentage(n) {
+  return Math.round(parseFloat("".concat(n || 0)) * 100);
+}
+
 var useChart = (function (props) {
@@ -243,4 +252,3 @@ var pixelRatio = props.pixelRatio,
       _props$colDefs = props.colDefs,
-      colDefs = _props$colDefs === void 0 ? {} : _props$colDefs,
-      _props$animate = props.animate;
+      colDefs = _props$colDefs === void 0 ? {} : _props$colDefs;
 
@@ -286,3 +294,2 @@ var _useState = React.useState(),
     if (mounting.current) {
-      console.log('chart.render');
       chart.render();
@@ -627,2 +634,3 @@ mounting.current = false;
 exports.Tooltip = index$a;
+exports.getPercentage = getPercentage;
 exports.isFunction = isFunction;
@@ -629,0 +637,0 @@ exports.px2hd = px2hd;

dist/utils/index.d.ts

@@ -13,1 +13,7 @@ /**
 export declare function isFunction(obj: any): boolean;
+/**
+ * 获取%
+ * 如：输入 0.200011010 输出 20
+ * @param n
+ */
+export declare function getPercentage(n: number): number;

docs/index.md

 ---
-title: dumi - A doc tool can assist you to develop libraries & write docs.
+title: alitajs/f2 - 支持react hooks 的 F2 图表组件库
 order: 10
 hero:
-  title: dumi
-  desc: 📖 A doc tool can assist you to develop libraries & write docs.
+  title: alitajs/f2
+  desc: 📖 支持react hooks 的 F2 图表组件库
   actions:
-    - text: Getting Started
-      link: /api/foo
+    - text: 快速上手
+      link: /api/chart
 features:
   - icon: https://gw.alipayobjects.com/zos/bmw-prod/881dc458-f20b-407b-947a-95104b5ec82b/k79dm8ih_w144_h144.png
-    title: Out of the box
-    desc: Elegant default configrations and convention routing assist developers to get started as simple as possible, that focus all attentions on developing libraries & writting docs
+    title: 专注移动，体验优雅
+    desc: 基于 F2 封装的图表组件，支持 react hooks。帮助你快速的在移动端项目中构建图表。 完全准照 F2 的 API 封装，支持完全的图表自定义。
   - icon: https://gw.alipayobjects.com/zos/bmw-prod/d1ee0c6f-5aed-4a45-a507-339a4bfe076c/k7bjsocq_w144_h144.png
-    title: For developing libraries
-    desc: Rich Markdown extensions are not limited to rendering component demos, making component documents not only easy to write and manage, but also beautiful and easy to use
+    title: 图表丰富，组件完备
+    desc: 与传统的图表库不同，抛弃了特图特做的封装思路，基于强大的图形语法理论，以数据驱动，通过图形语法的组合灵活构建各类图表，目前可绘制 50+ 图表类型（当然，还可以更多），覆盖各类场景 在提供基础的图表可视化能力外，我们还提供了丰富图表功能组件，满足各种功能需求。
   - icon: https://gw.alipayobjects.com/zos/bmw-prod/b8570f4d-c1b1-45eb-a1da-abff53159967/kj9t990h_w144_h144.png
-    title: Theme system
-    desc: Progressive custom theme capabilities, ranging from expanding your own Markdown tags to customizing complete theme packages, are up to you
-  - icon: https://gw.alipayobjects.com/zos/bmw-prod/b3e102cd-5dad-4046-a02a-be33241d1cc7/kj9t8oji_w144_h144.png
-    title: API automatically generated
-    desc: Component API can be automatically generated based on TypeScript type definitions, and components will always be『the same in appearance』
-  - icon: https://gw.alipayobjects.com/zos/bmw-prod/3863e74a-7870-4874-b1e1-00a8cdf47684/kj9t7ww3_w144_h144.png
-    title: Mobile component library development
-    desc: Install the theme package to quickly enable mobile component R&D capabilities, built-in mobile HD rendering solution
-  - icon: https://gw.alipayobjects.com/zos/bmw-prod/f093e060-726e-471c-a53e-e988ed3f560c/kj9t9sk7_w144_h144.png
-    title: Asset dataization capabilities
-    desc: One-line command digitizes component assets, and standardized asset data can be connected with downstream productivity tools
-footer: Open-source MIT Licensed | Copyright © 2019-present<br />Powered by self
+    title: 扩展灵活，创意无限
+    desc: 我们在提供最佳实践的同时，还为开发者提供了灵活的扩展机制，包括 Shape、动画以及交互的自定义能力，当然还有图表样式的个性化定制，满足各种个性化的图表要求。
+footer: Open-source MIT Licensed | Copyright © 2021-present<br />Powered by xiaohuoni
 ---
 
-## Getting Started
+其实在你的项目中，并不需要自定义图表。
 
-Create first doc in manual way
+我们通过对移动端的图表需求进行整理和构建，提供了一个常用的[图表库 @alitajs/charts](https://github.com/alitajs/f2)。
 
-```bash
-// Create dir for libraries
-$ mkdir library && cd library
+你可以优先使用[@alitajs/charts](https://github.com/alitajs/f2)快速实现你的需求。
 
-// Install dumi
-$ npm i dumi
+## 用法
 
-// Create docs
-$ mkdir docs && echo '# Hello dumi!' > docs/index.md
+### 常规用法
 
-// Preview docs
-$ npx dumi dev
+```ts
+import React, { useState } from 'react';
+import { Chart, Geometry } from '@alitajs/f2';
+
+const ChartDemo = () => {
+  const data = [
+    { year: '1951', sales: 38 },
+    { year: '1952', sales: 52 },
+    { year: '1956', sales: 61 },
+    { year: '1957', sales: 145 },
+    { year: '1958', sales: 48 },
+    { year: '1959', sales: 38 },
+    { year: '1960', sales: 38 },
+    { year: '1962', sales: 38 },
+  ];
+  return (
+    <>
+      <Chart width={750} height={400} data pixelRatio={window.devicePixelRatio}>
+        <Geometry type="interval" position="year*sales" />
+      </Chart>
+    </>
+  );
+};
+
+export default ChartDemo;
 ```
 
-## Feedback
+### react hooks 用法
 
-Please visit [GitHub](https://github.com/umijs/dumi) or join the discuss group
+```tsx
+import React, { useState, useRef, useEffect } from 'react';
+import { useChart, useGeometry } from '@alitajs/f2';
 
-<img src="https://gw.alipayobjects.com/zos/bmw-prod/877c66b3-ec81-48ca-ad7f-f3a6f7e19b42/kiprxtw0_w1004_h1346.png" width="260" />
-<img src="https://gw.alipayobjects.com/zos/bmw-prod/c18bc2a5-719a-48ca-b225-c79ef88bfb43/k7m10ymd_w1004_h1346.jpeg" width="260"/>
+const ChartDemo = () => {
+  const data = [
+    { year: '1951', sales: 38 },
+    { year: '1952', sales: 52 },
+    { year: '1956', sales: 61 },
+    { year: '1957', sales: 145 },
+    { year: '1958', sales: 48 },
+    { year: '1959', sales: 38 },
+    { year: '1960', sales: 38 },
+    { year: '1962', sales: 38 },
+  ];
+  const [isXy, setIsXy] = useState(true);
+  const elmRef = useRef<HTMLCanvasElement>(null);
+  const { setContainer, container, chart } = useChart({
+    container: elmRef.current as HTMLCanvasElement,
+    width: 750,
+    height: 400,
+    data,
+    pixelRatio: window.devicePixelRatio,
+  });
+  const { geometry } = useGeometry({
+    type: 'interval',
+    chart,
+    position: 'year*sales',
+  });
+
+  useEffect(() => setContainer(elmRef.current as HTMLElement | undefined), [
+    elmRef.current,
+  ]);
+  useEffect(() => {
+    if (chart && geometry) {
+      geometry.position(isXy ? 'year*sales' : 'sales*year');
+      chart.repaint();
+    }
+  }, [isXy]);
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          setIsXy(!isXy);
+        }}
+      >
+        两级反转
+      </button>
+      <canvas ref={elmRef} style={{ display: 'block' }} />
+    </>
+  );
+};
+
+export default ChartDemo;
+```

docs/index.zh-CN.md

 ---
-title: dumi - 为组件开发场景而生的文档工具
+title: alitajs/f2 - 支持react hooks 的 F2 图表组件库
 order: 10
 hero:
-  title: dumi
-  desc: 📖 为组件开发场景而生的文档工具
+  title: alitajs/f2
+  desc: 📖 支持react hooks 的 F2 图表组件库
   actions:
     - text: 快速上手
-      link: /zh-CN/api/foo
+      link: /api/chart
 features:
   - icon: https://gw.alipayobjects.com/zos/bmw-prod/881dc458-f20b-407b-947a-95104b5ec82b/k79dm8ih_w144_h144.png
-    title: 开箱即用
-    desc: 考究的默认配置和约定式的目录结构，帮助开发者零成本上手，让所有注意力都能放在文档编写和组件开发上
+    title: 专注移动，体验优雅
+    desc: 轻量化呈现，自然反馈 轻巧流畅 多端异构
   - icon: https://gw.alipayobjects.com/zos/bmw-prod/d1ee0c6f-5aed-4a45-a507-339a4bfe076c/k7bjsocq_w144_h144.png
-    title: 为组件开发而生
-    desc: 丰富的 Markdown 扩展，不止于渲染组件 demo，使得组件的文档不仅易于编写、管理，还好看、好用
+    title: 图表丰富，组件完备
+    desc: 与传统的图表库不同，抛弃了特图特做的封装思路，基于强大的图形语法理论，以数据驱动，通过图形语法的组合灵活构建各类图表，目前可绘制 50+ 图表类型（当然，还可以更多），覆盖各类场景 在提供基础的图表可视化能力外，我们还提供了丰富图表功能组件，满足各种功能需求。
   - icon: https://gw.alipayobjects.com/zos/bmw-prod/b8570f4d-c1b1-45eb-a1da-abff53159967/kj9t990h_w144_h144.png
-    title: 主题系统
-    desc: 渐进式的自定义主题能力，小到扩展自己的 Markdown 标签，大到自定义完整主题包，全由你定
-  - icon: https://gw.alipayobjects.com/zos/bmw-prod/b3e102cd-5dad-4046-a02a-be33241d1cc7/kj9t8oji_w144_h144.png
-    title: API 自动生成
-    desc: 可基于 TypeScript 类型定义自动生成组件 API，组件永远『表里如一』
-  - icon: https://gw.alipayobjects.com/zos/bmw-prod/3863e74a-7870-4874-b1e1-00a8cdf47684/kj9t7ww3_w144_h144.png
-    title: 移动端组件库研发
-    desc: 安装主题包即可快速启用移动端组件研发能力，内置移动端高清渲染方案
-  - icon: https://gw.alipayobjects.com/zos/bmw-prod/f093e060-726e-471c-a53e-e988ed3f560c/kj9t9sk7_w144_h144.png
-    title: 资产数据化能力
-    desc: 一行命令将组件资产数据化，标准化的资产数据可与下游生产力工具串联
-footer: Open-source MIT Licensed | Copyright © 2019-present<br />Powered by self
+    title: 扩展灵活，创意无限
+    desc: 我们在提供最佳实践的同时，还为开发者提供了灵活的扩展机制，包括 Shape、动画以及交互的自定义能力，当然还有图表样式的个性化定制，满足各种个性化的图表要求。
+footer: Open-source MIT Licensed | Copyright © 2021-present<br />Powered by xiaohuoni
 ---
 
-## 轻松上手
+基于 F2 封装的图表组件，支持 react hooks。帮助你快速的在移动端项目中构建图表。
+完全准照 F2 的 API 封装，支持完全的图表自定义，但是其实在你的项目中，并不需要自定义图表。
+我们通过对移动端的图表需求进行整理和构建，提供了一个常用的[图表库 @alitajs/charts](https://github.com/alitajs/f2)。
+你可以优先使用[@alitajs/charts](https://github.com/alitajs/f2)快速实现你的需求。
 
-手动创建第一篇文档
+## 用法
 
-```bash
-// 创建组件开发的目录
-$ mkdir library && cd library
+### 常规用法
 
-// 安装 dumi
-$ npm i dumi
+```tsx
+import React, { useState } from 'react';
+import { Chart, Geometry } from '@alitajs/f2';
 
-// 创建文档
-$ mkdir docs && echo '# Hello dumi!' > docs/index.md
+const ChartDemo = () => {
+  const data = [
+    { year: '1951', sales: 38 },
+    { year: '1952', sales: 52 },
+    { year: '1956', sales: 61 },
+    { year: '1957', sales: 145 },
+    { year: '1958', sales: 48 },
+    { year: '1959', sales: 38 },
+    { year: '1960', sales: 38 },
+    { year: '1962', sales: 38 },
+  ];
+  return (
+    <>
+      <Chart width={750} height={400} data pixelRatio={window.devicePixelRatio}>
+        <Geometry type="interval" position="year*sales" />
+      </Chart>
+    </>
+  );
+};
 
-// 预览文档
-$ npx dumi dev
+export default ChartDemo;
 ```
 
-## 反馈与共建
+### react hooks 用法
 
-请访问 [GitHub](https://github.com/umijs/dumi) 或加入讨论群：
+```tsx
+import React, { useState, useRef, useEffect } from 'react';
+import { useChart, useGeometry } from '@alitajs/f2';
 
-<img src="https://gw.alipayobjects.com/zos/bmw-prod/877c66b3-ec81-48ca-ad7f-f3a6f7e19b42/kiprxtw0_w1004_h1346.png" width="260" />
-<img src="https://gw.alipayobjects.com/zos/bmw-prod/c18bc2a5-719a-48ca-b225-c79ef88bfb43/k7m10ymd_w1004_h1346.jpeg" width="260"/>
+const ChartDemo = () => {
+  const data = [
+    { year: '1951', sales: 38 },
+    { year: '1952', sales: 52 },
+    { year: '1956', sales: 61 },
+    { year: '1957', sales: 145 },
+    { year: '1958', sales: 48 },
+    { year: '1959', sales: 38 },
+    { year: '1960', sales: 38 },
+    { year: '1962', sales: 38 },
+  ];
+  const [isXy, setIsXy] = useState(true);
+  const elmRef = useRef<HTMLCanvasElement>(null);
+  const { setContainer, container, chart } = useChart({
+    container: elmRef.current as HTMLCanvasElement,
+    width: 750,
+    height: 400,
+    data,
+    pixelRatio: window.devicePixelRatio,
+  });
+  const { geometry } = useGeometry({
+    type: 'interval',
+    chart,
+    position: 'year*sales',
+  });
+
+  useEffect(() => setContainer(elmRef.current as HTMLElement | undefined), [
+    elmRef.current,
+  ]);
+  useEffect(() => {
+    if (chart && geometry) {
+      geometry.position(isXy ? 'year*sales' : 'sales*year');
+      chart.repaint();
+    }
+  }, [isXy]);
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          setIsXy(!isXy);
+        }}
+      >
+        两级反转
+      </button>
+      <canvas ref={elmRef} style={{ display: 'block' }} />
+    </>
+  );
+};
+
+export default ChartDemo;
+```

package.json

 {
   "name": "@alitajs/f2",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "scripts": {
@@ -5,0 +5,0 @@ "start": "dumi dev",

README.md

@@ -1,1 +0,96 @@
-# 🌟 Dumi Template
+# @alitajs/f2
+
+基于 F2 封装的图表组件，支持 react hooks。帮助你快速的在移动端项目中构建图表。
+完全准照 F2 的 API 封装，支持完全的图表自定义，但是其实在你的项目中，并不需要自定义图表。
+我们通过对移动端的图表需求进行整理和构建，提供了一个常用的[图表库 @alitajs/charts](https://github.com/alitajs/charts)。
+你可以优先使用[@alitajs/charts](https://github.com/alitajs/charts)快速实现你的需求。
+
+## 用法
+
+### 常规用法
+
+```tsx
+import React, { useState } from 'react';
+import { Chart, Geometry } from '@alitajs/f2';
+
+const ChartDemo = () => {
+  const data = [
+    { year: '1951', sales: 38 },
+    { year: '1952', sales: 52 },
+    { year: '1956', sales: 61 },
+    { year: '1957', sales: 145 },
+    { year: '1958', sales: 48 },
+    { year: '1959', sales: 38 },
+    { year: '1960', sales: 38 },
+    { year: '1962', sales: 38 },
+  ];
+  return (
+    <>
+      <Chart width={750} height={400} data pixelRatio={window.devicePixelRatio}>
+        <Geometry type="interval" position="year*sales" />
+      </Chart>
+    </>
+  );
+};
+
+export default ChartDemo;
+```
+
+### react hooks 用法
+
+```tsx
+import React, { useState, useRef, useEffect } from 'react';
+import { useChart, useGeometry } from '@alitajs/f2';
+
+const ChartDemo = () => {
+  const data = [
+    { year: '1951', sales: 38 },
+    { year: '1952', sales: 52 },
+    { year: '1956', sales: 61 },
+    { year: '1957', sales: 145 },
+    { year: '1958', sales: 48 },
+    { year: '1959', sales: 38 },
+    { year: '1960', sales: 38 },
+    { year: '1962', sales: 38 },
+  ];
+  const [isXy, setIsXy] = useState(true);
+  const elmRef = useRef<HTMLCanvasElement>(null);
+  const { setContainer, container, chart } = useChart({
+    container: elmRef.current as HTMLCanvasElement,
+    width: 750,
+    height: 400,
+    data,
+    pixelRatio: window.devicePixelRatio,
+  });
+  const { geometry } = useGeometry({
+    type: 'interval',
+    chart,
+    position: 'year*sales',
+  });
+
+  useEffect(() => setContainer(elmRef.current as HTMLElement | undefined), [
+    elmRef.current,
+  ]);
+  useEffect(() => {
+    if (chart && geometry) {
+      geometry.position(isXy ? 'year*sales' : 'sales*year');
+      chart.repaint();
+    }
+  }, [isXy]);
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          setIsXy(!isXy);
+        }}
+      >
+        两级反转
+      </button>
+      <canvas ref={elmRef} style={{ display: 'block' }} />
+    </>
+  );
+};
+
+export default ChartDemo;
+```

src/Animate/index.zh-CN.md

@@ -13,3 +13,2 @@ ---
 
-
 <API/>

src/Animate/useAnimate.ts

@@ -5,3 +5,3 @@ import { useMemo } from 'react';
 
-export interface UseAnimate extends AnimateProps { }
+export interface UseAnimate extends AnimateProps {}
 
@@ -8,0 +8,0 @@ export default (props = {} as UseAnimate) => {

src/Axis/index.zh-CN.md

@@ -13,3 +13,2 @@ ---
 
-
 <API/>

src/Axis/useAxis.ts

 import { useMemo } from 'react';
 import { AxisProps } from './';
 
-export interface UseAxis extends AxisProps { }
+export interface UseAxis extends AxisProps {}
 
@@ -6,0 +6,0 @@ export default (props = {} as UseAxis) => {

src/Chart/useChart.ts

@@ -25,3 +25,2 @@ import { useEffect, useState, useRef } from 'react';
     colDefs = {},
-    animate = true,
   } = props;
@@ -40,3 +39,3 @@ const [chart, setChart] = useState<F2.Chart>();
         appendPadding,
-        plugins: [PieLabel, ScrollBar]
+        plugins: [PieLabel, ScrollBar],
       });
@@ -55,3 +54,2 @@ instance.source(data, colDefs);
     if (mounting.current) {
-      console.log('chart.render')
       chart.render();
@@ -58,0 +56,0 @@ mounting.current = false;

src/Coordinate/index.zh-CN.md

@@ -13,3 +13,2 @@ ---
 
-
 <API/>

src/Coordinate/useCoordinate.ts

 import { useMemo } from 'react';
 import { CoordinateProps } from './';
 
-export interface UseCoordinate extends CoordinateProps { }
+export interface UseCoordinate extends CoordinateProps {}
 
@@ -6,0 +6,0 @@ export default (props = {} as UseCoordinate) => {

src/Geometry/useGeometry.ts

@@ -5,3 +5,3 @@ import { useState, useMemo } from 'react';
 
-export interface UseGeometry extends GeometryProps { }
+export interface UseGeometry extends GeometryProps {}
 
@@ -8,0 +8,0 @@ export default (props = {} as UseGeometry) => {

src/Guide/index.zh-CN.md

@@ -13,3 +13,2 @@ ---
 
-
 <API/>

src/Guide/useGuide.ts

@@ -6,3 +6,3 @@ import { useState, useMemo } from 'react';
 
-export interface UseGuide extends GuideProps { }
+export interface UseGuide extends GuideProps {}
 
@@ -9,0 +9,0 @@ export default (props = {} as UseGuide) => {

src/Interaction/index.zh-CN.md

@@ -13,3 +13,2 @@ ---
 
-
 <API/>

src/Interaction/useInteraction.ts

 import { useMemo } from 'react';
 import { InteractionProps } from './';
 
-export interface UseInteraction extends InteractionProps { }
+export interface UseInteraction extends InteractionProps {}
 
@@ -11,4 +11,4 @@ export default (props = {} as UseInteraction) => {
     if (reset) {
-      console.log('interaction')
-      console.log(field)
+      console.log('interaction');
+      console.log(field);
       chart.interaction(field, reset);
@@ -15,0 +15,0 @@ } else {

src/Legend/index.zh-CN.md

@@ -13,3 +13,2 @@ ---
 
-
 <API/>

src/Legend/useLegend.ts

 import { useMemo } from 'react';
 import { LegendProps } from './';
 
-export interface UseLegend extends LegendProps { }
+export interface UseLegend extends LegendProps {}
 
@@ -6,0 +6,0 @@ export default (props = {} as UseLegend) => {

src/PieLabel/index.zh-CN.md

@@ -13,3 +13,2 @@ ---
 
-
 <API/>

src/PieLabel/usePieLabel.ts

 import { useMemo } from 'react';
 import { PieLabelProps } from './';
 
-export interface UsePieLabel extends PieLabelProps { }
+export interface UsePieLabel extends PieLabelProps {}
 
@@ -6,0 +6,0 @@ export default (props = {} as UsePieLabel) => {

src/Scale/index.zh-CN.md

@@ -13,3 +13,2 @@ ---
 
-
 <API/>

src/Scale/useScale.ts

 import { useMemo } from 'react';
 import { ScaleProps } from './';
 
-export interface UseScale extends ScaleProps { }
+export interface UseScale extends ScaleProps {}
 
@@ -6,0 +6,0 @@ export default (props = {} as UseScale) => {

src/ScrollBar/index.zh-CN.md

@@ -13,3 +13,2 @@ ---
 
-
 <API/>

src/ScrollBar/useScrollBar.ts

 import { useMemo } from 'react';
 import { ScrollBarProps } from './';
 
-export interface UseScrollBar extends ScrollBarProps { }
+export interface UseScrollBar extends ScrollBarProps {}
 
@@ -6,0 +6,0 @@ export default (props = {} as UseScrollBar) => {

src/Tooltip/index.zh-CN.md

@@ -13,3 +13,2 @@ ---
 
-
 <API/>

src/Tooltip/useTooltip.ts

 import { useMemo } from 'react';
 import { TooltipProps } from './';
 
-export interface UseTooltip extends TooltipProps { }
+export interface UseTooltip extends TooltipProps {}
 
@@ -6,0 +6,0 @@ export default (props = {} as UseTooltip) => {

src/utils/index.ts

@@ -22,1 +22,10 @@ /**
 }
+
+/**
+ * 获取%
+ * 如：输入 0.200011010 输出 20
+ * @param n
+ */
+export function getPercentage(n: number) {
+  return Math.round(parseFloat(`${n || 0}`) * 100);
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Non-existent author

Supply chain risk

The package was published by an npm account that no longer exists.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

122187

increased by4.99%

Lines of code

3996

increased by1.6%

Number of lines in readme file

97

increased by4750%

Number of high supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

124

decreased by-0.8%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes