Skip to content

[CX] Allow option to rotate axis labels on interactive graphs #2284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Mar 12, 2025

Conversation

nishasy
Copy link
Contributor

@nishasy nishasy commented Mar 5, 2025

Summary:

This PR is part of the Interactive Graph Project.

The purpose of this PR is to add a new option that will allow Content Creators to change the location of the axis labels between "onAxis" and "alongEdge".

Note: While working on this ticket, a long-standing bug was found where the axis labels will continue to stretch further away from their desired locations on largely positive or negative graphs. This will require clamping the min/max values for our calculations. However, adding that logic was making this ticket seem quite complicated so I have opted to create a separate ticket for handling this. See https://khanacademy.atlassian.net/browse/LEMS-2912 for more details.

Screenshots:

onAxis (Default)

Screenshot 2025-03-12 at 10 52 46 AM

alongEdge

Screenshot 2025-03-12 at 10 52 29 AM

Issue: https://khanacademy.atlassian.net/browse/LEMS-2718

Test plan:

  • New tests
  • Tests Pass
  • Manual Testing

@nishasy nishasy self-assigned this Mar 5, 2025
Copy link
Contributor

github-actions bot commented Mar 5, 2025

Size Change: +670 B (+0.08%)

Total Size: 876 kB

Filename Size Change
packages/perseus-editor/dist/es/index.js 276 kB +115 B (+0.04%)
packages/perseus/dist/es/index.js 370 kB +555 B (+0.15%)
ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 39.7 kB
packages/keypad-context/dist/es/index.js 760 B
packages/kmath/dist/es/index.js 11.1 kB
packages/math-input/dist/es/index.js 77.5 kB
packages/math-input/dist/es/strings.js 1.79 kB
packages/perseus-core/dist/es/index.js 31.9 kB
packages/perseus-linter/dist/es/index.js 22.8 kB
packages/perseus-score/dist/es/index.js 20.6 kB
packages/perseus/dist/es/strings.js 6.73 kB
packages/pure-markdown/dist/es/index.js 4.14 kB
packages/simple-markdown/dist/es/index.js 13.1 kB

compressed-size-action

@SonicScrewdriver SonicScrewdriver requested review from a team and removed request for a team March 11, 2025 22:51
Copy link
Contributor

github-actions bot commented Mar 12, 2025

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (9dfa73a) and published it to npm. You
can install it using the tag PR2284.

Example:

pnpm add @khanacademy/perseus@PR2284

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR2284

@SonicScrewdriver SonicScrewdriver marked this pull request as ready for review March 12, 2025 17:56
@nishasy
Copy link
Contributor Author

nishasy commented Mar 12, 2025

Note: This work was actually completed by @SonicScrewdriver. We paired on reviewing it together.

Copy link
Contributor

@SonicScrewdriver SonicScrewdriver left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We approve of ourselves.

@SonicScrewdriver SonicScrewdriver merged commit 0d5ab0b into main Mar 12, 2025
8 checks passed
@SonicScrewdriver SonicScrewdriver deleted the rotated-axis-labels branch March 12, 2025 22:01
SonicScrewdriver added a commit that referenced this pull request Mar 19, 2025
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @khanacademy/[email protected]

### Major Changes

- [#2303](#2303)
[`5e7a6084c`](5e7a608)
Thanks [@benchristel](https://github.com/benchristel)! - Drop support
for using KaTeX as a math renderer. You may encounter styling issues or
TeX syntax errors if you try to implement `PerseusDependencies.TeX`
using KaTeX.

### Minor Changes

- [#2284](#2284)
[`0d5ab0b2e`](0d5ab0b)
Thanks [@nishasy](https://github.com/nishasy)! - Add new labelLocation
value for Interactive Graphs


- [#875](#875)
[`9737eb497`](9737eb4)
Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - Remove
deprecated khan-exercise.css


- [#2305](#2305)
[`af6d89007`](af6d890)
Thanks [@Myranae](https://github.com/Myranae)! - Add a story for
Dropdown that uses answerless data

### Patch Changes

- [#2307](#2307)
[`dd7b13a78`](dd7b13a)
Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! -
Revert SSS temporarily for Radio to ensure Multiselect + Random answer
correctness is accurate

- Updated dependencies
\[[`0d5ab0b2e`](0d5ab0b),
[`fea65eaf1`](fea65ea)]:
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]

## @khanacademy/[email protected]

### Major Changes

- [#2303](#2303)
[`5e7a6084c`](5e7a608)
Thanks [@benchristel](https://github.com/benchristel)! - Drop support
for using KaTeX as a math renderer. You may encounter styling issues or
TeX syntax errors if you try to implement `PerseusDependencies.TeX`
using KaTeX.

### Minor Changes

- [#2284](#2284)
[`0d5ab0b2e`](0d5ab0b)
Thanks [@nishasy](https://github.com/nishasy)! - Add new labelLocation
value for Interactive Graphs

### Patch Changes

- Updated dependencies
\[[`0d5ab0b2e`](0d5ab0b),
[`fea65eaf1`](fea65ea),
[`9737eb497`](9737eb4),
[`dd7b13a78`](dd7b13a),
[`af6d89007`](af6d890),
[`5e7a6084c`](5e7a608)]:
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]

## @khanacademy/[email protected]

### Minor Changes

- [#2284](#2284)
[`0d5ab0b2e`](0d5ab0b)
Thanks [@nishasy](https://github.com/nishasy)! - Add new labelLocation
value for Interactive Graphs

### Patch Changes

- [#2300](#2300)
[`fea65eaf1`](fea65ea)
Thanks [@benchristel](https://github.com/benchristel)! - Bugfix: allow
the 'key' field of Radio widgets to be null when parsing Perseus JSON

## @khanacademy/[email protected]

### Patch Changes

- Updated dependencies
\[[`0d5ab0b2e`](0d5ab0b),
[`fea65eaf1`](fea65ea)]:
    -   @khanacademy/[email protected]

## @khanacademy/[email protected]

### Patch Changes

- Updated dependencies
\[[`0d5ab0b2e`](0d5ab0b),
[`fea65eaf1`](fea65ea)]:
    -   @khanacademy/[email protected]

## @khanacademy/[email protected]

### Patch Changes

- Updated dependencies
\[[`0d5ab0b2e`](0d5ab0b),
[`fea65eaf1`](fea65ea)]:
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]

## @khanacademy/[email protected]

### Patch Changes

- Updated dependencies
\[[`0d5ab0b2e`](0d5ab0b),
[`fea65eaf1`](fea65ea)]:
    -   @khanacademy/[email protected]

## @khanacademy/[email protected]

### Patch Changes

- Updated dependencies
\[[`0d5ab0b2e`](0d5ab0b),
[`fea65eaf1`](fea65ea)]:
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]

## @khanacademy/[email protected]

### Patch Changes

- Updated dependencies
\[[`0d5ab0b2e`](0d5ab0b),
[`fea65eaf1`](fea65ea)]:
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]
    -   @khanacademy/[email protected]
SonicScrewdriver pushed a commit that referenced this pull request Mar 20, 2025
## Summary:
This PR is part of the Interactive Graph Project. 

The purpose of this PR is to add a new option that will allow Content Creators to change the location of the axis labels between "onAxis" and "alongEdge". 

Note: While working on this ticket, a long-standing bug was found where the axis labels will continue to stretch further away from their desired locations on largely positive or negative graphs. This will require clamping the min/max values for our calculations. However, adding that logic was making this ticket seem quite complicated so I have opted to create a separate ticket for handling this. See https://khanacademy.atlassian.net/browse/LEMS-2912 for more details.

## Screenshots:
### onAxis (Default) 
![Screenshot 2025-03-12 at 10 52 46 AM](https://github.com/user-attachments/assets/c8b65da1-c34e-424a-b802-dcf550afad58)

### alongEdge 
![Screenshot 2025-03-12 at 10 52 29 AM](https://github.com/user-attachments/assets/920e7f68-f90c-4be6-b82e-d592c451acfa)

Issue: https://khanacademy.atlassian.net/browse/LEMS-2718

## Test plan:
- New tests 
- Tests Pass 
- Manual Testing

Author: nishasy

Reviewers: SonicScrewdriver

Required Reviewers:

Approved By: SonicScrewdriver

Checks: ✅ 8 checks were successful

Pull Request URL: #2284
SonicScrewdriver added a commit that referenced this pull request Mar 20, 2025
## Summary:
This PR redeploys [the labelLocation work](#2284) with several fixes:

1. A fix was applied to the InteractiveGraphBuilder to ensure that `labelLocation` will default to `undefined` for manual testing purposes. 
2. A fix was applied to th transform logic to account for `labelLocation` being undefined.
3. The transform logic was extracted out into a separate function for testing purposes. 

## Test plan:
- manual testing 
- new tests

Author: SonicScrewdriver

Reviewers: nishasy

Required Reviewers:

Approved By: nishasy

Checks: ✅ 12 checks were successful, ⌛ 1 check is pending

Pull Request URL: #2316
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants