v1.5.0¶

data-viz-visual-parts-sdkをv1.5.0にアップデートしました。
- data-viz-visual-parts-sdk v1.5.0では以下のAPIが追加されました。
  
  ExposerEvent.senderEdge
  Data Visualizerで設定されているSender Edgeの情報を受信する
  
  ExposerEvent.measurementCreate
  ビジュアルパーツからData Visualizerに計測の作成をリクエストする
  
  ExposerEvent.measurement
  Data Visualizerが作成した計測の情報を、ビジュアルパーツが受信する
- Data VisualizerからUint8Array型のバイナリデータを取得することが可能になりました。
  - Uint8Arrayで受け取りが可能なデータは、JPEGまたはPNGの画像データ、およびROS Topicのデータです。
  - この対応により、ValueDataで表現されるデータポイントの値の型として、string、numberに加えてUint8Arrayが追加されました。
ProfilerOnRenderCallback型の関数で、各引数の不要な型定義を削除しました。
依存しているNPMパッケージを更新しました。
サポートするNode.jsのバージョンを、18.12.0以上にしました。

v1.4.0からv1.5.0への移行手順¶

data-viz-create-visual-parts-react v1.4.0 を使用して作成したワークスペースは、以下の操作を行うことで、v1.5.0 を使用して作成したワークスペースと同じ状態にすることができます。

注釈

この移行手順を実行しなくても、v1.4.0以下で作成したビジュアルパーツは継続して使用することが可能です。

作成済みのワークスペースをv.1.5.0に合わせたい場合のみ、以降の手順を実行してください。

ワークスペース直下の package.json を以下のように更新します。

package.json

diff --git a/package.json b/package.json
index baf694b..24fcc53 100644
--- a/package.json
+++ b/package.json
@@ -60,24 +60,24 @@
     "test:webpack-dev": "webpack --config webpack.dev.js"
   },
   "dependencies": {
-    "@aptpod/data-viz-visual-parts-sdk": "^1.4.0",
+    "@aptpod/data-viz-visual-parts-sdk": "^1.5.0",
     "binary-search-bounds": "^2.0.5",
-    "chart.js": "^4.3.0",
+    "chart.js": "^4.4.0",
     "chartjs-adapter-date-fns": "^3.0.0",
-    "core-js": "3.31.0",
+    "core-js": "3.31.1",
     "d3": "^6.7.0",
     "date-fns": "^2.30.0",
     "react": "^18.2.0",
     "react-chartjs-2": "5.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^5.3.11",
-    "zod": "^3.21.4"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@axe-core/react": "4.7.3",
-    "@babel/core": "7.22.5",
-    "@babel/eslint-parser": "^7.22.5",
-    "@babel/eslint-plugin": "^7.22.5",
+    "@axe-core/react": "4.8.1",
+    "@babel/core": "7.23.3",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/eslint-plugin": "^7.22.10",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addons": "^6.5.16",
@@ -86,41 +86,41 @@
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/react": "^6.5.16",
     "@testing-library/react-hooks": "5.1.3",
-    "@types/babel__core": "7.20.1",
+    "@types/babel__core": "7.20.4",
     "@types/browserslist": "4.8.0",
-    "@types/caniuse-lite": "1.0.1",
-    "@types/chart.js": "^2.9.37",
-    "@types/core-js": "2.5.5",
-    "@types/d3": "^7.4.0",
+    "@types/caniuse-lite": "1.0.4",
+    "@types/chart.js": "^2.9.40",
+    "@types/core-js": "2.5.8",
+    "@types/d3": "^7.4.3",
     "@types/eslint": "7.29.0",
-    "@types/file-loader": "^5.0.1",
-    "@types/jest": "^29.5.2",
+    "@types/file-loader": "^5.0.4",
+    "@types/jest": "^29.5.8",
     "@types/mini-css-extract-plugin": "2.5.0",
     "@types/prettier": "2.7.3",
-    "@types/progress-bar-webpack-plugin": "2.1.2",
-    "@types/prop-types": "15.7.5",
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
-    "@types/react-test-renderer": "^18.0.0",
-    "@types/styled-components": "^5.1.26",
+    "@types/progress-bar-webpack-plugin": "2.1.5",
+    "@types/prop-types": "15.7.10",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@types/react-test-renderer": "^18.0.6",
+    "@types/styled-components": "^5.1.30",
     "@types/stylelint": "13.13.3",
     "@types/terser-webpack-plugin": "5.0.4",
     "@types/testing-library__react-hooks": "3.4.1",
-    "@types/webpack": "^5.28.1",
-    "@types/webpack-bundle-analyzer": "^4.6.0",
+    "@types/webpack": "^5.28.5",
+    "@types/webpack-bundle-analyzer": "^4.6.3",
     "@types/webpack-dev-server": "^4.7.2",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.59.11",
     "@typescript-eslint/typescript-estree": "^5.59.11",
     "babel-eslint": "10.1.0",
-    "babel-loader": "^9.1.2",
-    "browserslist": "4.21.9",
+    "babel-loader": "^9.1.3",
+    "browserslist": "4.21.11",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
-    "del-cli": "^5.0.0",
+    "del-cli": "^5.1.0",
     "eslint": "7.32.0",
     "eslint-config-prettier": "^7.2.0",
-    "eslint-import-resolver-webpack": "^0.13.2",
+    "eslint-import-resolver-webpack": "^0.13.8",
     "eslint-plugin-compat": "^3.13.0",
     "eslint-plugin-flowtype": "^5.10.0",
     "eslint-plugin-flowtype-errors": "^4.5.0",
@@ -135,18 +135,18 @@
     "html-loader": "^4.2.0",
     "husky": "^4.3.6",
     "image-webpack-loader": "^8.1.0",
-    "jest": "^29.5.0",
-    "lint-staged": "^13.2.2",
+    "jest": "^29.7.0",
+    "lint-staged": "^13.3.0",
     "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "4.1.5",
     "prettier": "2.8.8",
     "progress-bar-webpack-plugin": "2.1.0",
     "prop-types": "15.8.1",
     "react-test-renderer": "18.2.0",
-    "regenerator-runtime": "0.13.11",
-    "sort-package-json": "2.4.1",
+    "regenerator-runtime": "0.14.1",
+    "sort-package-json": "2.6.0",
     "source-map-loader": "^4.0.1",
-    "storycap": "4.1.2",
+    "storycap": "4.2.0",
     "style-loader": "^3.3.3",
     "stylelint": "13.13.1",
     "stylelint-a11y": "^1.2.3",
@@ -157,17 +157,17 @@
     "stylelint-no-unsupported-browser-features": "^4.1.4",
     "stylelint-processor-styled-components": "^1.10.0",
     "terser-webpack-plugin": "^5.3.9",
-    "ts-jest": "^29.1.0",
-    "ts-loader": "9.4.3",
-    "typescript": "^5.1.3",
+    "ts-jest": "^29.1.1",
+    "ts-loader": "9.5.1",
+    "typescript": "^5.2.2",
     "url-loader": "4.1.1",
     "utility-types": "^3.10.0",
     "webpack": "^5.87.0",
-    "webpack-bundle-analyzer": "4.9.0",
+    "webpack-bundle-analyzer": "4.9.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
   "engines": {
-    "node": ">=16.20.0"
+    "node": ">=18.12.0"
   }
 }
 

上記のパッチを適用後、以下のコマンドを実行してパッケージをインストールし、 package-lock.json を更新します。
```
$ npm i
```

データポイントを表現するValueData型の更新に伴い、データポイントの値を表す型にUint8Arrayを追加します。

src/entrypoint/samples/line-graph/component.tsx

diff --git a/src/entrypoint/samples/line-graph/component.tsx b/src/entrypoint/samples/line-graph/component.tsx
index 60c4c3a..d32b10a 100644
--- a/src/entrypoint/samples/line-graph/component.tsx
+++ b/src/entrypoint/samples/line-graph/component.tsx
@@ -40,7 +40,7 @@ type Props = {
     /** 非表示 */
     hidden: boolean
     /** データポイントの配列 */
-    datas: { t: number; v: number | string }[]
+    datas: { t: number; v: number | string | Uint8Array }[]
   }[]
   /** 凡例をクリックしたときのイベントハンドラです。識別子と非表示の変更後の非表示状態を取得します。 */
   onLegendHiddenChange: (payload: { valueID: string; hidden: boolean }) => void
 

src/entrypoint/samples/time-series-text/component.tsx

diff --git a/src/entrypoint/samples/time-series-text/component.tsx b/src/entrypoint/samples/time-series-text/component.tsx
index d4c4a4b..3798b34 100644
--- a/src/entrypoint/samples/time-series-text/component.tsx
+++ b/src/entrypoint/samples/time-series-text/component.tsx
@@ -4,7 +4,7 @@ import { DISPLAY_DATA_POINT_ROWS } from './constant'
 import * as S from './style'
 
 type Props = {
-  values: { t: number; v: number | string }[]
+  values: { t: number; v: number | string | Uint8Array }[]
 }
 
 export const TimeSeriesText: React.VFC<Props> = memo((props) => {
 

ProfilerOnRenderCallback型の関数で、各引数の不要な型定義を削除します。

diff --git a/src/utils/components/profiler/react-profiler-wrapper/component.tsx b/src/utils/components/profiler/react-profiler-wrapper/component.tsx
index c611425..a5fc6cb 100644
--- a/src/utils/components/profiler/react-profiler-wrapper/component.tsx
+++ b/src/utils/components/profiler/react-profiler-wrapper/component.tsx
@@ -8,16 +8,9 @@ type Props = {
 export const ReactProfilerWrapper: React.FC<Props> = (props) => {
   const { onProfile, children } = props
 
-  // cf. https://ja.reactjs.org/docs/profiler.html
+  // cf. https://ja.react.dev/reference/react/Profiler
   const handleProfilerRenderCallback: ProfilerOnRenderCallback = useCallback(
-    (
-      _id: string,
-      _phase: 'mount' | 'update',
-      actualDuration: number,
-      _baseDuration: number,
-      _startTime: number,
-      _commitTime: number,
-    ) => {
+    (_id, _phase, actualDuration, _baseDuration, _startTime, _commitTime) => {
       const actualDurationUnitSec = actualDuration * 1e-3
 
       if (onProfile) {
 