From d3d45045c466496bd19162a53e72b49c0da962b5 Mon Sep 17 00:00:00 2001 From: dami-moj Date: Tue, 2 Jul 2024 17:35:11 +0100 Subject: [PATCH 1/3] Update the referenced js file version --- entries_skipped.json | 13 ++++ index.html | 4 +- manage_discussions/README.md | 103 ++++++++++++++++++++++++++ manage_discussions/get_discussions.py | 3 + 4 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 entries_skipped.json create mode 100644 manage_discussions/README.md diff --git a/entries_skipped.json b/entries_skipped.json new file mode 100644 index 0000000..6177de8 --- /dev/null +++ b/entries_skipped.json @@ -0,0 +1,13 @@ +[ + { + "title": "new_test_entry", + "url": "https://github.com/moj-analytical-services/data-and-analytics-engineering-tech-radar/discussions/148", + "closed": false, + "category": { + "name": "Tools" + }, + "labels": { + "edges": [] + } + } +] \ No newline at end of file diff --git a/index.html b/index.html index 9a5a296..f00e342 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,8 @@ - - + + diff --git a/manage_discussions/README.md b/manage_discussions/README.md new file mode 100644 index 0000000..4c1e751 --- /dev/null +++ b/manage_discussions/README.md @@ -0,0 +1,103 @@ +# Tech Radar Discussion Management + +This script extracts technology radar entries from [the tech radar GitHub Discussions](https://github.com/moj-analytical-services/data-and-analytics-engineering-tech-radar/discussions) and outputs them in a structured `JSON` format used by the visualization framework. + +It can also compare the extracted data with a previous snapshot to identify changes. + + + +## Setup + +- Clone the Repository: +```bash +git clone git@github.com:moj-analytical-services/data-and-analytics-engineering-tech-radar.git +``` +```bash +cd data-and-analytics-engineering-tech-radar +``` +- **Create `.env` File**: Create a file named `.env` in the script's directory and add your GitHub personal access token in the following format: +```bash +GH_TOKEN= +``` +Replace `` with your actual GitHub personal access token (PAT) that has the necessary permissions for GraphQL API access. + +**For GitHub Personal Access Token:** +- Go to your [GitHub account settings](https://github.com/settings/profile), navigate to `Developer settings` -> `Personal access tokens`, click `Generate new token` and select the repo scope. + + Copy the generated token into the `.env` file. + +- create and activate a virtual environment: `venv` + +- install the python packages required +```pythpn +pip install -r requirements.txt +``` + +- Configure radar_config.json: Create a file named radar_config.json to define your radar's structure: + +```json +{ + "quadrants": [ + {"name": "Quadrant 1 Name", + "_location": "Top"}, + {"name": "Quadrant 2 Name", + "_location": "Bottom"}, + ... + ], + "rings": [ + {"name": "Ring 1 Name", "emoji": "โœ…"}, + {"name": "Ring 2 Name", "emoji": "๐Ÿงช"}, + ... + ] +} +``` + +**Example:** +```json +{ + "quadrants": [ + {"name": "Techniques"}, + {"name": "Platforms"}, + {"name": "Languages & Frameworks"}, + {"name": "Data Tools"} + ], + "rings": [ + {"name": "Adopt", "emoji": "โœ…"}, + {"name": "Trial", "emoji": "๐Ÿงช"}, + {"name": "Assess", "emoji": "๐Ÿ”Ž"}, + {"name": "Hold", "emoji": "๐Ÿ›‘"} + ] +} +``` + +- (Optional) Prepare `blips.json` for Comparison: + + If you want to compare with previous data, create a `blips.json` file with the following structure: + +```json +{ + "date": "YYYY-MM-DD", + "entries": [ + { + "label": "Entry 1 Label", + "quadrant": 0, + "ring": 2 + }, + ... + ] +} +``` + +**Usage** + +- Run the Script: +```bash +python manage_discussions/get_discussions.py +``` +- Output + +The script will generate two JSON files: + +`blips.json`: Contains the extracted radar entries with the current date, which also updates the visualization. + +`entries_skipped.json`: (If any) Lists discussions that didn't match the criteria for radar entries. diff --git a/manage_discussions/get_discussions.py b/manage_discussions/get_discussions.py index 50ef14f..b5733d3 100644 --- a/manage_discussions/get_discussions.py +++ b/manage_discussions/get_discussions.py @@ -88,6 +88,9 @@ ring_old = blips_old.get(details['title']) if ring_old is not None: ring_change = ring_old - ring + else: + # Set ring_change to 2 if it's a new entry + ring_change = 2 entries_new.append({"label":details['title'], "quadrant":quadrant, "ring":ring, From ff73944109b04561fcf7c83cca7d8de8394f88f4 Mon Sep 17 00:00:00 2001 From: murad-ali-MoJ Date: Wed, 3 Jul 2024 12:03:45 +0100 Subject: [PATCH 2/3] added live server doc to Dami's branch --- manage_discussions/README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/manage_discussions/README.md b/manage_discussions/README.md index 4c1e751..8dbe563 100644 --- a/manage_discussions/README.md +++ b/manage_discussions/README.md @@ -101,3 +101,14 @@ The script will generate two JSON files: `blips.json`: Contains the extracted radar entries with the current date, which also updates the visualization. `entries_skipped.json`: (If any) Lists discussions that didn't match the criteria for radar entries. +### Install a Live Server to View the Output of index.html Locally in VS Code + +To view the output of your index.html file in real-time, you need to install the Live Server extension. While some methods may suggest using tools like Yarn to install the necessary packages, we simplify the process by using the Live Server extension in Visual Studio Code (VS Code). This approach avoids unnecessary complexity and streamlines the workflow. +Follow these steps to install and use Live Server in Visual Studio Code: + +- Open Visual Studio Code: Launch VS Code on your computer. +- Access Extensions: Click on the Extensions icon in the Activity Bar on the side of the window. +- Search for Live Server: In the Extensions view, type "Live Server" in the search bar. +- Install Live Server: Click on the Install button for the Live Server extension. +- Open Your Project: Open the folder containing your project files, including index.html. +- Start Live Server: Right-click on your index.html file and select "Open with Live Server" from the context menu. \ No newline at end of file From 8d03cf798a155b0b1076119940c20356f1fc2c94 Mon Sep 17 00:00:00 2001 From: murad-ali-MoJ Date: Thu, 18 Jul 2024 10:40:48 +0100 Subject: [PATCH 3/3] update readme --- README.md | 146 +++++++++++++++++++++++++++++++++-- entries_skipped.json | 13 ---- manage_discussions/README.md | 114 --------------------------- 3 files changed, 138 insertions(+), 135 deletions(-) delete mode 100644 manage_discussions/README.md diff --git a/README.md b/README.md index 7849d5b..872031d 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,143 @@ # Data and Analytics Engineering Tech Radar -In the MoJ [Data and Analytics Engineering community](https://ministryofjustice.github.io/data-and-analytics-engineering/), -we maintain a [public Tech Radar](http://zalando.github.io/tech-radar/) to help our teams -align on technology choices. It is based on the [pioneering work +The MoJ [Data and Analytics Engineering community](https://ministryofjustice.github.io/data-and-analytics-engineering/), +maintains a [public Tech Radar](http://zalando.github.io/tech-radar/) to help +align technology choices within our teams. This Tech Radar is based on [pioneering work by ThoughtWorks](https://www.thoughtworks.com/radar) and uses a modified version of Zalando's -[`radar.js`](https://github.com/zalando/tech-radar/blob/master/docs/radar.js) [d3.js v4](https://d3js.org) tech radar visualisation. +[`radar.js`](https://github.com/zalando/tech-radar/blob/master/docs/radar.js) with [d3.js v4](https://d3js.org) for visualisation. -Tech radar blips are configured in `blips.json` against tech radar rings -and quadrants configured in `radar_config.json`. +Tech radar blips are configured in `blips.json`, while tech radar rings and quadrants are set up in `radar_config.json`. Additional context for the blips is provided by GitHub discussions, which are queried using the GitHub GraphQL API to populate `blips.json` -GitHub discussions provide additional context to the blips, -which are queried using the GitHub graphql API to populate `blips.json`. \ No newline at end of file + +# Tech Radar Discussion Management + +This script extracts technology radar entries from [the tech radar GitHub Discussions](https://github.com/moj-analytical-services/data-and-analytics-engineering-tech-radar/discussions) and outputs them in a structured `JSON` format used by the visualization framework. It can also compare the extracted data with a previous snapshot to identify changes. + + + +## Setup + +### Clone the Repository: + +```bash +git clone git@github.com:moj-analytical-services/data-and-analytics-engineering-tech-radar.git +``` +```bash +cd data-and-analytics-engineering-tech-radar +``` +### Create `.env` File: + +Create a file named `.env` in the script's directory and add your GitHub personal access token in the following format: +```bash +GH_TOKEN= +``` +Replace `` with your actual GitHub personal access token (PAT) that has the necessary permissions for GraphQL API access. + +**For GitHub Personal Access Token:** +
    +
  1. Go to your [GitHub account settings](https://github.com/settings/profile).
    2. +
  2. Navigate to Developer settings -> Personal access tokens.
    3. +
  3. Click Generate new token and select the repo scope.
    4. +
  4. Copy the generated token into the .env file.
    5. + +
+ +### Create and activate a virtual environment: + +``` +python -m venv venv +source venv/bin/activate +``` +### Install the python packages required + + +```pythpn +pip install -r requirements.txt +``` + +## Configure `radar_config.json`: +Create a file named `radar_config.json` to define your radar's structure: + +```json +{ + "quadrants": [ + {"name": "Quadrant 1 Name", + "_location": "Top"}, + {"name": "Quadrant 2 Name", + "_location": "Bottom"}, + ... + ], + "rings": [ + {"name": "Ring 1 Name", "emoji": "โœ…"}, + {"name": "Ring 2 Name", "emoji": "๐Ÿงช"}, + ... + ] +} +``` + +**Example:** +```json +{ + "quadrants": [ + {"name": "Techniques"}, + {"name": "Platforms"}, + {"name": "Languages & Frameworks"}, + {"name": "Data Tools"} + ], + "rings": [ + {"name": "Adopt", "emoji": "โœ…"}, + {"name": "Trial", "emoji": "๐Ÿงช"}, + {"name": "Assess", "emoji": "๐Ÿ”Ž"}, + {"name": "Hold", "emoji": "๐Ÿ›‘"} + ] +} +``` + +#### (Optional) Prepare `blips.json` for Comparison: + + If you want to compare with previous data, create a `blips.json` file with the following structure: + +```json +{ + "date": "YYYY-MM-DD", + "entries": [ + { + "label": "Entry 1 Label", + "quadrant": 0, + "ring": 2 + }, + ... + ] +} +``` + +### Usage + +#### Run the Script +```bash +python manage_discussions/get_discussions.py +``` +### Output + +The script will generate two JSON files: + +- `blips.json`: Contains the extracted radar entries with the current date, which also updates the visualization. + +- `entries_skipped.json`: (If any) Lists discussions that didn't match the criteria for radar entries. + + +### Viewing the Output Locally in VS Code +#### Install Live Server Extension +
    +
  1. Open Visual Studio Code: Launch VS Code on your computer.
    2. +
  2. Access Extensions: Click on the Extensions icon in the Activity Bar on the side of the window.
    3. +
  3. Search for Live Server: In the Extensions view, type "Live Server" in the search bar.
    4. +
  4. Install Live Server: Click on the Install button for the Live Server extension.
    5. +
+ +#### Start Live Server + +
    +
  1. Open Your Project: Open the folder containing your project files, including index.html
    2. +
  2. Start Live Server: Right-click on your index.html file and select "Open with Live Server" from the context menu.
    3. +
diff --git a/entries_skipped.json b/entries_skipped.json index 6177de8..e69de29 100644 --- a/entries_skipped.json +++ b/entries_skipped.json @@ -1,13 +0,0 @@ -[ - { - "title": "new_test_entry", - "url": "https://github.com/moj-analytical-services/data-and-analytics-engineering-tech-radar/discussions/148", - "closed": false, - "category": { - "name": "Tools" - }, - "labels": { - "edges": [] - } - } -] \ No newline at end of file diff --git a/manage_discussions/README.md b/manage_discussions/README.md deleted file mode 100644 index 8dbe563..0000000 --- a/manage_discussions/README.md +++ /dev/null @@ -1,114 +0,0 @@ -# Tech Radar Discussion Management - -This script extracts technology radar entries from [the tech radar GitHub Discussions](https://github.com/moj-analytical-services/data-and-analytics-engineering-tech-radar/discussions) and outputs them in a structured `JSON` format used by the visualization framework. - -It can also compare the extracted data with a previous snapshot to identify changes. - - - -## Setup - -- Clone the Repository: -```bash -git clone git@github.com:moj-analytical-services/data-and-analytics-engineering-tech-radar.git -``` -```bash -cd data-and-analytics-engineering-tech-radar -``` -- **Create `.env` File**: Create a file named `.env` in the script's directory and add your GitHub personal access token in the following format: -```bash -GH_TOKEN= -``` -Replace `` with your actual GitHub personal access token (PAT) that has the necessary permissions for GraphQL API access. - -**For GitHub Personal Access Token:** -- Go to your [GitHub account settings](https://github.com/settings/profile), navigate to `Developer settings` -> `Personal access tokens`, click `Generate new token` and select the repo scope. - - Copy the generated token into the `.env` file. - -- create and activate a virtual environment: `venv` - -- install the python packages required -```pythpn -pip install -r requirements.txt -``` - -- Configure radar_config.json: Create a file named radar_config.json to define your radar's structure: - -```json -{ - "quadrants": [ - {"name": "Quadrant 1 Name", - "_location": "Top"}, - {"name": "Quadrant 2 Name", - "_location": "Bottom"}, - ... - ], - "rings": [ - {"name": "Ring 1 Name", "emoji": "โœ…"}, - {"name": "Ring 2 Name", "emoji": "๐Ÿงช"}, - ... - ] -} -``` - -**Example:** -```json -{ - "quadrants": [ - {"name": "Techniques"}, - {"name": "Platforms"}, - {"name": "Languages & Frameworks"}, - {"name": "Data Tools"} - ], - "rings": [ - {"name": "Adopt", "emoji": "โœ…"}, - {"name": "Trial", "emoji": "๐Ÿงช"}, - {"name": "Assess", "emoji": "๐Ÿ”Ž"}, - {"name": "Hold", "emoji": "๐Ÿ›‘"} - ] -} -``` - -- (Optional) Prepare `blips.json` for Comparison: - - If you want to compare with previous data, create a `blips.json` file with the following structure: - -```json -{ - "date": "YYYY-MM-DD", - "entries": [ - { - "label": "Entry 1 Label", - "quadrant": 0, - "ring": 2 - }, - ... - ] -} -``` - -**Usage** - -- Run the Script: -```bash -python manage_discussions/get_discussions.py -``` -- Output - -The script will generate two JSON files: - -`blips.json`: Contains the extracted radar entries with the current date, which also updates the visualization. - -`entries_skipped.json`: (If any) Lists discussions that didn't match the criteria for radar entries. -### Install a Live Server to View the Output of index.html Locally in VS Code - -To view the output of your index.html file in real-time, you need to install the Live Server extension. While some methods may suggest using tools like Yarn to install the necessary packages, we simplify the process by using the Live Server extension in Visual Studio Code (VS Code). This approach avoids unnecessary complexity and streamlines the workflow. -Follow these steps to install and use Live Server in Visual Studio Code: - -- Open Visual Studio Code: Launch VS Code on your computer. -- Access Extensions: Click on the Extensions icon in the Activity Bar on the side of the window. -- Search for Live Server: In the Extensions view, type "Live Server" in the search bar. -- Install Live Server: Click on the Install button for the Live Server extension. -- Open Your Project: Open the folder containing your project files, including index.html. -- Start Live Server: Right-click on your index.html file and select "Open with Live Server" from the context menu. \ No newline at end of file